如何给div里面的外层的最后一个li赋值.style.borderRight

阿弥陀佛 2013-02-09 12:28:45
假设有的li里面还有<ul><li>嵌套，但是只取外层的最后一个<li>2224</li>（红色部分）的.style.borderRight值，怎么操作，如下：





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

    <title>test</title>

    <style type="text/css">

        li{ border:1px dotted #ccc; margin-bottom:20px;}

    </style>

</head>

<body>

<div id="navParent">

    <ul>

        <li>111</li>

        <li>222</li>

            <ul>

                （这里可能只有ul，没有li）

             </ul>

        <li>2223</li>

        <li>2224</li>

            <ul>

                <li>aaa</li>

                <li>bbb</li>

            </ul>

    </ul>

</div>

<script type="text/javascript">

    var getElm = document.getElementById("navParent").getElementsByTagName("LI");//这样取值取的是<div id="navParent">内所有的li

    getElm[getElm.length - 1].style.borderRight = "none";

</script>

</body>

</html>
...全文
240 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿弥陀佛 2013-02-11
  • 打赏
  • 举报
 回复
引用 9 楼 showbo 的回复:
下了个ff18也没问题呢。。
真心的谢谢showbo版主，我换了一台笔记本安装上FF18，并且让别人测试也是上述代码在FF下没效果。我都差点放弃了，实在很无奈，所以今天中午之后，就放下这该死的代码，带老婆孩子去娱乐城玩了一整天，晚上8点多回来，刚刚11点多他们睡下，我又捡起代码，反复测试，终于发现问题之所在！ 原来的确跟js代码放的先后位置是有关系的！上述js代码跟原有的程序段相冲，因为在我的js里面已经有这么一段js代码（用于IE6下实现li.hover下拉菜单效果）： 

var cssRule; 
var newSelector; 
for (var i = 0; i < document.styleSheets.length; i++) 
   for (var x = 0; x < document.styleSheets[i].rules.length ; x++) 
    { 
    cssRule = document.styleSheets[i].rules[x]; 
    if (cssRule.selectorText.indexOf("LI:hover") != -1) 
    { 
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover"); 
     document.styleSheets[i].addRule(newSelector , cssRule.style.cssText); 
    } 
   }
而showbo版主给的这段js代码被我放到了func.js的最后： 

var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//noneSet记录是否已经对最后一个li设置过borderRight了
for(var i=nodes.length-1;i>=0;i--)
	{
		if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
		 if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
		 else{nodes[i].style.borderRight = "none";noneSet=true;}
		}
	}
所以由于上文的li已经被做了替换，所以实际上下文的document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes实际获取的应该是空值，接下来的代码相当于没执行！ 当我把这两段js互换位置之后，问题完美解决！ 不过有意思的是，IE8和360急速浏览器都不受此影响，只有FF会这样，莫名其妙，难不成是IE始终是兼容性最好的？ 最后再次感谢showbo版主，大过节的不厌其烦，给出完整代码，解决了我的大问题，而且让我学会了很多东西！我这里把解决问题的思路写在这里，也是希望对跟我遇到类似问题的朋友们以参考！
Go 旅城通票 2013-02-09
  • 打赏
  • 举报
 回复
下了个ff18也没问题呢。。
阿弥陀佛 2013-02-09
  • 打赏
  • 举报
 回复
全都是utf-8编码的，不是ansi编码的。 也没有乱码。 这个alert("func.js")有输出。 呵呵，就是FF18下不出结果，其他的都行。
Go 旅城通票 2013-02-09
  • 打赏
  • 举报
 回复
不会吧。。我这里测试没问题呢。。你的页面编码是utf-8的，html和js文件的存储编码为utf-8了吗？如果不是utf-8可能是出乱码了导致脚本出错 用记事本打开html/js文件，另存为，看编码是不是utf-8，默认是ansi的，如果不是utf-8就修改为utf-8 func.js

alert("func.js")///////加这句看输出了没

stuHover = function() {
var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//记录是否已经对最后一个li设置过borderRight了

alert(nodes.length)
for(var i=nodes.length-1;i>=0;i--)
    {
        if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
         if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
         else{nodes[i].style.borderRight = "none";noneSet=true;}
        }
    }
 
}
 
 window.onload = stuHover;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        li{ border:1px dotted #ccc; margin-bottom:20px;}
body{background:#666666}
    </style><script type="text/javascript" src="js/func.js"></script>
</head>
<body>
<div id="navParent">
    <ul>
        <li>111</li>
        <li>222</li>
            <ul>
                （这里可能只有ul，没有li）
             </ul>
        <li>2223</li>
        <li>2224</li>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
            </ul>
    </ul>
</div>
</body>
</html>
阿弥陀佛 2013-02-09
  • 打赏
  • 举报
 回复
我的func.js文件是这么写的： 


………………

stuHover = function() {
var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes,noneSet=false;//记录是否已经对最后一个li设置过borderRight了
for(var i=nodes.length-1;i>=0;i--)
	{
		if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
		 if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
		 else{nodes[i].style.borderRight = "none";noneSet=true;}
		}
	}

}

 window.onload = stuHover;
在</head>前引用： <script type="text/javascript" src="js/func.js"></script> 但是这种方式对FF还是无效！
Go 旅城通票 2013-02-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        li{ border:1px dotted #ccc; margin-bottom:20px;}
    </style>
</head>
<body>
<div id="navParent">
    <ul>
        <li>111</li>
        <li>222</li>
            <ul>
                （这里可能只有ul，没有li）
             </ul>
        <li>2223</li>
        <li>2224</li>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
            </ul>
    </ul>
</div>
<script type="text/javascript">
    var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes
,noneSet=false;//记录是否已经对最后一个li设置过borderRight了
for(var i=nodes.length-1;i>=0;i--)
if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){
 if(noneSet)nodes[i].style.borderRight = "2px solid #fff";
 else{  nodes[i].style.borderRight = "none";noneSet=true;}
}
</script>
</body>
</html>
不过建议ul中不要嵌套ul，因为ul不是ul的子元素，这样可能不同浏览器会导致页面错位，js代码出错什么的
阿弥陀佛 2013-02-09
  • 打赏
  • 举报
 回复
请问我如果这么写对吗，就是实现：最后一个li的borderRight赋值none，其他li都赋值2px solid #fff 

var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes; 
for(var i=nodes.length-1;i>=0;i--) 
	{
		if(nodes[i].nodeType==1&&nodes[i].tagName=="LI")
		{
		 nodes[i].style.borderRight = "none";
		}else
		{
		nodes[i].style.borderRight = "2px solid #fff";
		}
	}
阿弥陀佛 2013-02-09
  • 打赏
  • 举报
 回复
引用 2 楼 showbo 的回复:

var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes; 
for(var i=nodes.length-1;i>=0;i--) 
if(nodes[i].nodeType==1&&nodes[i].tagName=="LI")
{
 nodes[i].style.borderRight = "none";break; 
}
呵呵，同样的，在同一个页面，该js在FF起作用，被调用模式不起作用！
Go 旅城通票 2013-02-09
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>test</title>
    <style type="text/css">
        li{ border:1px dotted #ccc; margin-bottom:20px;}
    </style>
</head>
<body>
<div id="navParent">
    <ul>
        <li>111</li>
        <li>222</li>
            <ul>
                （这里可能只有ul，没有li）
             </ul>
        <li>2223</li>
        <li>2224</li>
            <ul>
                <li>aaa</li>
                <li>bbb</li>
            </ul>
    </ul>
</div>
<script type="text/javascript">
    var nodes = document.getElementById("navParent").getElementsByTagName("ul")[0].childNodes;
for(var i=nodes.length-1;i>=0;i--)
if(nodes[i].nodeType==1&&nodes[i].tagName=="LI"){///
 nodes[i].style.borderRight = "none";break;
}
</script>
</body>
</html>
paul烂熊 2013-02-09
  • 打赏
  • 举报
 回复
$("#navParent>ul>span>li").attr({"style":"border-right:1px solid blue"}) 用juery很简单选择啊
【前端面试题】我靠它拿到了大厂Offer
每日一题（前端面试） 第 23 题：介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景 观察者模式中主体和观察者是互相感知的； 假设你正在找一份软件工程师的工作，对“香蕉公司”很感兴趣。所以你联系了他们的HR，给了他你的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选人也你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。 这里的“香蕉公...
js:4.
JS第四周 正则 定义：是一个用来处理字符串的规则 正则只能用来处理字符串 处理一般包含两方面 验证当前字符串是否符合某个规则”正则匹配” 把一个字符串中符合规则的字符获取到”正则捕获” 创建正则的两种方式 1.let reg1=/^\d+$/g;//=&gt;字面量方式 2.let reg2=new RegExp("^\\d+$","g");//=&gt;构造函数方式 元字符和修饰符 正则两个斜...
【前端】前端面试题整理
前端和计算机相关知识 你能描述一下渐进增强和优雅降级之间的不同吗 浏览器兼容问题 如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离 关于浏览器内核(渲染引擎) 浏览器加载文件顺序以及repaint/reflow 为什么使用多个域名来存储网络资源会更有效？ 进程和线程的区别 前端开发的优化问题 Flash，Ajax各自的优缺点，使用中如何取舍？ CS...
前端面试题总结
前端和计算机相关知识你能描述一下渐进增强和优雅降级之间的不同吗浏览器兼容问题如何对网站的文件和资源进行优化?怎么学习前端?怎么接触前端新知识?关于前后端分离关于浏览器内核(渲染引擎)浏览器加载文件顺序以及repaint/reflow为什么使用多个域名来存储网络资源会更有效？进程和线程的区别前端开发的优化问题Flash，Ajax各自的优缺点，使用中如何取舍？CSSCSS3css居中的方式请写一个简单...
世间网站,完美体验,唯快不破
李小龙说过:"天下武功,无坚不摧,唯快不破".(真的说过吗?)我想说的是:"世间网站,完美体验,唯快不破".(这个我承认我说过.) 俗话说,时间就是生命,时间就是金钱,时间就是一切,人人都不想把时间白白浪费,一个网站,最重要的就是体验,而网站好不好最直观的感受就是这个网站打开速度快不快,卡不卡. 当打开一个购物网站卡出翔,慢的要死,是不是如同心塞一样的感受,蓝瘦香菇,想买个...
JavaScript

87,917

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章