javascript - 动态更新所有出现的至

Question

我有很多使用无法正常工作的旧嵌套列表的 html 页面。我想动态查看页面是否使用它并添加类属性或建议更好的方法来执行此操作。

动态更新所有出现的

<ol type="a"> to <ol class="alpha">

或者建议是否有办法我仍然可以使用该类型但使用嵌入式 CSS 应用样式？

Answer 1

如果你想用 JavaScript 做到这一点，用 jQuery 很容易：

$(document).ready(function(e) {
    $('ol[type="a"]').addClass("alpha").removeAttr("type");
});

这会将 <ol type="a"> 更改为 <ol class="alpha">，方法是选择带有 type="a" 的 ol，然后添加 alpha 类，然后删除 type 属性。

Answer 2

在不使用 JavaScript 的情况下，您可以使用 CSS 属性选择器：

ol[type=a] {
    color: red;
}

JS 小提琴演示。

重要的是要注意，这也可能“无法正常工作”（我在第一次阅读您的问题时错过了这个短语），这取决于“不工作”是如何表现出来的，或者是什么不起作用。

如果您觉得必须使用 JavaScript，那么以下方法有效：

var ols = document.getElementsByTagName('ol');

for (var i=0, len=ols.length; i<len; i++){
    ols[i].className = ols[i].type == 'a' ? 'alpha' : '';
}

JS 小提琴演示。

如果要在type设置类后删除该属性：

var ols = document.getElementsByTagName('ol');

for (var i=0, len=ols.length; i<len; i++){
    if (ols[i].type == 'a') {
        ols[i].className = 'alpha';
        ols[i].removeAttribute('type');
    }        
}

JS 小提琴演示。