Javascript 将样式应用于div中的listitem

你好

我想知道是否可以将样式应用于列表项 使用javascript嵌套在div中的。在我的页面上已经有很多带有listitems的div，但我只想对特定的listitems应用一种样式

我想使用javascrip将样式应用到listitem的唯一原因是IE7存在查看问题，它不想在div中接受css样式

我的HTML是：

<ol>    
   <li>
      GENERAL PRINCIPLES UNDERLYING THE REPRESENTIVE COUNCIL OF LEARNERS
      <div id = "divv">
         <ol>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
            <li>....</li>
         </ol>
      </div>
    </li>
<ol>

代表性学习者委员会的一般原则

---

谢谢你

当然你可以而且它也应该在IE7上工作，因为它是IE一直支持的东西，例如

#divv ol li{your style properties here}

---

应该适用于所有浏览器。唯一一种情况是，如果您取消了“ol li”样式设置，那么这将不起作用！重要提示“css中的其他地方。

是的，您可以使用getElementById和getElementsByTagName的组合，然后对找到的项目运行循环，并使用javascript添加css样式。

---

这里有一个相同的jsfiddle:

您所需要做的就是获取带有ID的div，然后从那里遍历DOM，直到找到所需的列表。然后只需使用list style对象来注入所需的样式

我还怀疑，如果你不能从CSS中实现它，那么它会有更多的问题，而且结构良好的CSS总是可以应用的（当然，除非不受支持）

这里对您提供的测试标记进行了一些修改，它抓取div，找到其中的OL，然后向其添加边框

---

我创建了一个JSFIDLE，演示内部列表的CSS样式

---

你是说你不能用“#div ol li”这样的CSS选择器来设置子列表的样式吗？通过它的id获取div元素并进行DOM遍历，用javascript搜索google中的DOM遍历，你会找到很多好文章

var div = document.getElementById('divv'),
    found = false,
    elem = div.firstChild;

while (!found) {

    if (elem.nodeType == 1) {
        elem.style.border = '2px solid red';
        found = true;
    }
    else elem = elem.nextSibling;
};​