最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
在IE中用javascript配合 使用first-child伪类
时间：2022-07-02 12:42:35 编辑：袖梨 来源：一聚教程网
制作符合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。
相关文章
- 《燕云十六声》配置要求介绍 12-25
- 《燕云十六声》搬砖介绍 12-25
- 时空中的绘旅人天宇之间怎么玩 绘旅人天宇之间活动玩法介绍 12-25
- QQ2024年度报告怎么看 2024qq年度报告玩法介绍 12-25
- 归龙潮珠砂什么时候up 归龙潮红缘绮梦卡池介绍 12-25
- 王者荣耀S38赛季有什么更新 12-25