如何修改CSS样式表选择器属性？两种传统实现方法解析

嘿，这里给你整理了两种传统上修改重复元素样式的常用方法，都是前端开发里挺经典的实现思路：

方法1：为每个元素直接设置行内样式 #

这种方法是通过JavaScript遍历目标元素，逐个给它们设置行内样式，能直接覆盖元素原有的样式：

function changeStyle(selector, prop, val) {
    var elems = document.querySelectorAll(selector);
    Array.prototype.forEach.call( elems, function(ele) {
        ele.style[prop] = val;
    });
}
// 调用示例：把所有class为myData的元素文字改成红色
changeStyle('.myData', 'color', 'red');

方法2：通过添加类来覆盖现有样式 #

这种方法更符合样式与逻辑分离的最佳实践，先在CSS里定义好类的样式，再用JS给目标元素批量添加这个类：

function addClass(selector, newClass) {
    var elems = document.querySelectorAll(selector);
    for (let i=0; i<elems.length; i++) {
        elems[i].classList.add(newClass);
    }
}
// 调用示例：给所有class为myData的元素添加highlight类
addClass('.myData', 'highlight');

对应的CSS定义示例：

.highlight {
    color: red;
    font-weight: bold;
}

内容的提问来源于stack exchange，提问作者gmoz22