Question

美好的一天。

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

我想使用javascrip将样式应用于listitem的唯一原因是因为IE 7中存在查看问题，不想接受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>

谢谢

Answer 1

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

#divv ol li{your style properties here}

应适用于所有浏览器。唯一不会起作用的情况是，如果你在css中的其他地方取消了“！li”造型，那就是“！”。

Answer 2

是的，你可以使用getElementById和getElementsByTagName的组合，然后在找到的项目上运行循环并使用javascript添加css样式。这是一个相同的jsfiddle：http://jsfiddle.net/saganbyte/m65CF/1/

Answer 3

您需要做的就是使用ID抓取div并从那里遍历DOM，直到您到达所需的列表。然后只需使用列表样式对象来注入所需的样式。

另外我怀疑如果你不能用CSS做这件事就会有更多的问题，因为结构化的CSS总是可以应用（除非当然不支持）

这里有一个你提供的测试标记的小提琴，它抓住div，找到它里面的OL，然后为它添加一个边框。

http://jsfiddle.net/Dj5gH/1/

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;
};

Answer 4

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

http://jsfiddle.net/adrianjmartin/9V8tR

将样式应用于div中的listitem

4 个答案: