Question

我想用JavaScript更改Less文件的属性。这是我的代码

document.getElementsByClassName('content-main--inner').style.border = '1px solid yellow!important';

我已经用!important尝试了它，没有它。

但这不起作用，财产不会改变。我认为问题在于：

('content-main--inner')

是否可以使用JavaScript操作Less文件？

Answer 1

getElementsByClassName返回一个nodeList，而不是一个元素，你必须迭代

var elems = document.getElementsByClassName('content-main--inner');

for (var i=elems.length; i--;) {
    elems[i].style.border = '1px solid yellow';
}

请注意，!important无法在javascript或内联样式中设置

Answer 2

使用js修改较少的文件对你没有任何好处，因为当你修改文件时它已经被翻译成css

有人评论说，getElementsByClassName返回一个nodeList，这意味着您需要执行以下操作来修改第一个元素

document.getElementsByClassName('content-main--inner')[0].style.border = '1px solid yellow !important';

或者如果您想修改类content-main--inner

的所有元素

var elements =  document.getElementsByClassName('content-main--inner')

for( var i = 0; i < elements.length; i++) {
     elements[i].style.border = '1px solid yellow !important';
}

使用JavaScript更改Less文件

2 个答案: