在IE中使用first-child和last-child [半原][旧]
来源:互联网 发布:关口知宏评价中国 编辑:程序博客网 时间:2024/06/13 11:53
使用web standards做网页,经常需要定义某个父元素下的第一个子(child)元素或最后一个元素,以便将其与其他元素区分开来,有利于实现某些特殊需求。最浅显的例子是,导航项目间的竖线,我们往往通过border
或者background
来实现。特殊需求是,第一项左边无竖线或最后一项右边无竖线。
遗憾的是,当前全球占有率最高的浏览器,IE6,并不支持这个伪元素。我们可以手工给第一个元素加上class然后再定义它。但这不是一个万无一失的办法,尤其对于页面规模达到一定数量大型网站,很容易挂一漏万。那么,让JavaScript来帮我们完成这件工作如何?
<script language="javascript" type="text/javascript">//自动给LI的第一个加上叫first-child的class;最后一个加上叫last-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");
}
}
function addLastChild(){
var olitems=document.getElementsByTagName("ol");
var ulitems=document.getElementsByTagName("ul");
for(var i=0;i<olitems.length;i++){
addClassName(olitems[i].getElementsByTagName("li")[olitems[i].children.length-1],"last-child");
}
for(var i=0;i<ulitems.length;i++){
addClassName(ulitems[i].getElementsByTagName("li")[ulitems[i].children.length-1],"last-child");
}
}
if(document.all && !window.opera){
window.onload=addFirstChild;
window.onload=addLastChild;
}
</script>
- 在IE中使用first-child和last-child [半原][旧]
- first-child 和 last-child的使用
- 在IE中使用first-child
- 【实用随记】ie下不支持first-child,last-child
- IE下的伪类:first-child和:last-child版本支持问题
- CSS3中first-child、last-child、nth-child、nth-last-child
- css:first-child、last-child、nth-child、 nth-last-child
- jquery 的:first-child 和:last-child 选择器实例
- :last-child works, :first-child doesn't
- jQuery 选择器 first-child和first-of-type、 last-child和last-of-type的区别
- css中的first-child nth-child nth-last-child() 和:nth-of-type(n)
- first VS first child , last VS last-child
- CSS中first-child和nth-child的讲解
- CSS中first-child和nth-child的讲解
- jquery子元素过滤选择器:nth-child、:first-child、:last-child、:only-child
- Pseudoclasses :first-child and :last-child for IE6
- 【CSS3】---结构性伪类选择器-first-child+last-child
- jQuery中:first,:first-child,first()的使用区别
- java正则表达式
- Android Intent Flag的介绍
- 图像平滑-邻域平均法
- 如何理解软件开发规范性与灵活性
- 使用Oracle SQLDeveloper连接数据库并创建用户
- 在IE中使用first-child和last-child [半原][旧]
- 11gR2中awr 相关脚本的说明
- IntPtr和string的相互转化
- Android入门/GirdView(九)
- Android中的Broadcast Action大全
- iphone定位城市
- 安全增强 Linux (SELinux) 剖析
- Android开发之文件浏览器
- Python基础教程——8 异常