使用 JavaScript 更改 Less 文件

Question

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

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

我试过使用 !important 和不使用它。

但这不起作用，属性没有改变。我认为问题出在这里：

('content-main--inner')

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

Answer 1

getElementsByClassName returns 一个节点列表，不是单个元素，你必须迭代

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 修改你的 less 文件对你没有任何好处，因为在你修改文件时它已经被翻译成 css

正如有人评论的那样，getElementsByClassName returns 一个节点列表意味着您需要执行以下操作来修改第一个元素

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

或者如果你想用 class 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 文件

Using JavaScript to change Less files

javascript

css

less