展会信息港展会大全

在IE中用javascript配合 使用first-child伪类
来源:互联网   发布日期:2016-03-25 16:34:00   浏览:1470次  

导读:制作符合web标准的网页,经常需要定义某个父元素下的第一个子(child)元素或最后一个元素,以便将其与其他元素区分开来,有利于实现某些特殊需求。最浅显的例子是,导航项目间的竖线,我们往往通...

制作符合web标准的网页,经常需要定义某个父元素下的第一个子(child)元素或最后一个元素,以便将其与其他元素区分开来,有利于实现某些特殊需求。最浅显的例子是,导航项目间的竖线,我们往往通过border或者background来实现。特殊需求是,第一项左边无竖线或最后一项右边无竖线。

那么区分第一项好呢,还是最后一项好?答案是明显的,逼不得已,不要用区别最后一项。按照一般的编程方法,控制第一项要比控制最后一项容易得多。

区分第一项的还有一个好处是,CSS有一个:first-child的伪元素(pseudo element)可以让我们轻而易举的选择第一个子元素。

遗憾的是,当前全球占有率最高的浏览器,IE6,并不支持这个伪元素。我们可以手工给第一个元素加上class然后再定义它。但这不是一个万无一失的办法,尤其对于页面规模达到一定数量大型网站,很容易挂一漏万。那么,让JavaScript来帮我们完成这件工作如何?

给未支持:first-child的浏览器添加first-child的class

代码如下

复制代码

function addClassName(tag, classname) {

if (!tag.className)

{

tag.className = classname;

}

else {

tag.className += " " + classname;

}

}

function addFirstChild() {

var olitems = document.getElementsByTagName("ol");

var ulitems = document.getElementsByTagName("ul");

for ( var i = 0 ; i < olitems.length ; i++ )

{

addClassName(olitems[i].getElementsByTagName("li")["0"], "first-child");

}

for ( var i = 0 ; i < ulitems.length ; i++ )

{

addClassName(ulitems[i].getElementsByTagName("li")["0"], "first-child");

}

}

if (document.all && !window.opera)

{

window.onload = addFirstChild;

}

body {font: 81.25%/1.7 Sans-Serif;}

li:first-child, li.first-child {color: red;}

给未支持:first-child的浏览器添加first-child的class

请使用IE浏览器,如果您能看到每个列表项的第一个li的颜色是红色,那么证明我们成功地选择了first-child。

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港