javascript - 将样式应用于 div 内的列表项

Question

再会。

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

我想使用 javascrip 将样式应用于列表项的唯一原因是因为 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>

谢谢

score 0 · Accepted Answer

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

#divv ol li{your style properties here}

应该适用于所有浏览器。唯一不起作用的情况是，如果您在 css 的其他地方取消了带有“！important”的“ol li”样式。

score 0 · Accepted Answer

是的，您可以使用 getElementById 和 getElementsByTagName 的组合来执行此操作，然后对找到的项目运行循环并使用 javascript 添加 css 样式。这里是同样的 jsfiddle：http: //jsfiddle.net/saganbyte/m65CF/1/

score 0 · Accepted Answer

您需要做的就是获取带有 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;
};

score 0 · Accepted Answer

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

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

javascript - 将样式应用于 div 内的列表项

4 回答 4

Related

Reference