长湖南营销型网站,网站搭建品牌,互助资金盘网站开发,网站建设捌金手指下拉四本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了#xff1a; 1 DOM四个常用的方法 首先看一下效果#xff0c;初始时是一个相册#xff0c;可以点击导航#xff0c;切换图片#xff0c;并切换下方显示内容#xff1a; 点击house#xff0c;可以动态的切… 本文介绍了使用DOM的简单方法实现动态加载图片的功能。 前文介绍了 1 DOM四个常用的方法 首先看一下效果初始时是一个相册可以点击导航切换图片并切换下方显示内容 点击house可以动态的切换另一个图片 所使用的代码如下 !doctype html
htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title我的相册/titlestyle typetext/cssbody {font-family: Helvetica,Arial,sans-serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color:#333;background-color: transparent;}a {color:#c60;background-color: transparent;font-weight: bold;text-decoration:none;}li {float: left;padding: 1em;list-style: none;}img {clear:both;display: block;}/style/headbodyh1我的相册/h1ullia hrefimages/pig.png titleIm pig! οnclickshowPic(this);return false;Pig/a/lilia hrefimages/rabit.png titleIm rabit! οnclickshowPic(this);return false;Rabit/a/lilia hrefimages/house.png titleIm house! οnclickshowPic(this);return false;house/a/lilia hrefimages/monkey.png titleIm monkey! οnclickshowPic(this);return false;monkey/a/li/ulimg idplaceHolder altimage srcimages/pig.png/p iddescriptionChoose an image./pscript typetext/javascriptfunction showPic(whichPic){var source whichPic.getAttribute(href);var placeHolder document.getElementById(placeHolder);placeHolder.setAttribute(src,source);var text whichPic.getAttribute(title);var description document.getElementById(description);description.firstChild.nodeValue text;}/script/body
/html 代码解析 在这篇示例代码中主要需要了解的内容是: 1 如何获取元素对象的属性 2 如何动态设置元素对象的属性值 3 如何拦截click事件 4 如何动态设置元素文本 5 float浮动 12 获取设置元素对象的属性 前篇已经介绍过了获取设置元素的属性可以使用getAttribute()和setAttribute()两个方法: 在showPic()函数中通过传过来的对象可以直接调用getAttribute获取属性href的链接内容然后通过getElementById方法获取图片对象并设置其src的属性值。 var source whichPic.getAttribute(href);
var placeHolder document.getElementById(placeHolder);
placeHolder.setAttribute(src,source); 3 onclick事件 上面已经创建好了showPic()方法只要传入对象即可。因此在a标签中使用onclick事件即可。 但是onClick事件是要接收一个bool值如果是true则会默认的跳到另一个网页链接相反如果是false则不会产生任何结果。 因此在onClick事件中需要如下书写 a hrefimages/pig.png titleIm pig! οnclickshowPic(this);return false;Pig/a 4 动态设置文本 如果想要使用元素对象的文本使用nodeValue就可以了。但是如果直接使用会得到null值。 因为元素对象本身是没有文本的但是它有childNodes对象、firstChild和lastChild对象。 展开他的childNodes属性可以发现该属性中包含一个对象 该对象中有nodeValue属性对应的才是标签对应的内容。 由于该标签中只有一个对象因此使用 firstChild 和 lastChild 或者 childNodes[0] 都可以获取到该对象。 其中的原理类似前面文章讲述的元素节点属性节点和文本节点的关系文本节点是该元素标签节点的一个子对象因此无法用nodeValue直接获取标签的文本而是需要获取它的孩子对象才能得到nodeValue。 5 float浮动 如果不设置img的CSS样式会发现本来我们想要使ul中的li标签水平显示结果在宽度足够的情况下img也跟着水平显示了。 这是为什么呢 查阅资料发现原来传统的文档对象是按照文档布局来显示的由上到下由左到右遇到块级元素则换行遇到内联元素则补齐。 如果使用float浮动会打破该布局如果给对象设置上了float属性则会导致文档布局时出现一定的空隙那么这个空隙就会让下一个元素来填充了。 因此上面的图片布局中img元素会随着ul中li的float一起浮动显示。 而clear:both则是为了预防float引起的布局错乱可以使用clear清除布局设置。这样img就不会与前面的li产生同样的float效果了。 但是虽然清除了浮动但由于img元素属于内联元素因此只要把它转换成块级元素就可以产生换行的效果了。 img {clear:both;display: block;} 参考 【1】float详解http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html 【2】《JavaScript DOM 编程艺术》 【3】巧用clear:bothhttp://www.cnblogs.com/jenney-qiu/archive/2012/03/28/2421819.html 【4】displayhttp://www.w3school.com.cn/cssref/pr_class_display.asp 【5】块级元素与内联元素http://www.cnblogs.com/NetSos/archive/2010/08/31/1814223.html转载于:https://www.cnblogs.com/xing901022/p/4333757.html
