Question

我有以下情况：

.my-nice-class {
  max-width: 90%;
  max-height: 90%;
}

此代码位于html页面中的第一个<style>...</style>。我想通过设置例如下面示例中的新属性值来覆盖此全局css：

.my-nice-class {
  max-width: 40%;
  max-height: 40%;
}

如何使用纯Javascript完成此操作？

谢谢大家，

纳米

Answer 1

修改此对象

，根据需要修改css

$('.srcFilter a').click(function(e){
        e.preventDefault();
        var a = $(this).attr('href');
        var b = a.substring(1); // var b = a.substr(1);
        $('input#srcAll').attr('id',b);
});

或

修改相关DOM对象的样式属性

document.getElementsByTagName("style")[0].innerHTML

注意： 如果您有多个对象，则必须使用for循环而不是document.getElementsByClassName("my-nice-class").style[0] = "max-width: 40%;max-height: 40%;"。

Answer 2

document.getElementsByClassName("nav-questions").style.maxHeight="40%";
document.getElementsByClassName("nav-questions").style.maxWidth="40%";

这行代码会自动覆盖全局css，因为JS应用的css优先级总是更高（即使是内联css）。

Answer 3

document.getElementsByClassName("my-nice-class").style.maxWidth= "40%";
document.getElementsByClassName("my-nice-class").style.maxHeight= "40%";

Answer 4

对于此问题的可扩展解决方案，您还可以考虑使用BEM实现添加和删除修改类。

//HTML
<div class='my-nice-class my-nice-class--dimensions_A'></div>

然后是css：

CSS:
.my-nice-class--dimensions_A {
  max-width: 90%;
  max-height: 90%;
}

.my-nice-class--dimensions_B {
   max-width: 40%;
   max-height: 40%;
}

然后javascript可以添加和删除此类

//Javascript
var htmlEl = document.getElementsByClassName('my-nice-class')[0]; // in case you need the first element from the elements array
htmlEl.classList.add("my-nice-class--dimensions_B");
htmlEl.classList.remove("my-nice-class--dimensions_A"); // cleaner but optional, since cascading character of css will render --B first anyway at this point

Answer 5

有点老，但是这些都不适合我。也许区别在于EcmaScript标准，也许是因为我有提供的CSS类的多个元素。

访问style或document.getElementsByClassName("class-one")中任何一个下的document.querySelectorAll('.class-one', '.class-two')变量将得到undefined。为了具有一致的功能，始终应该假设在getElementsByClassName或querySelectorAll中返回了多个元素，因此循环是必要的。

使正确答案符合ES6（也许是ES5）标准将是遍历函数的结果：

对于getElementsByClassName：

let elements = document.getElementsByClassName("class-one");
for(var i = 0; i < slides.length; i++) {
   elements.item(i).style = "....";
}

对于querySelectorAll，可以使用forEach：

let elements = document.querySelectorAll('.class-one');
elements.forEach(element => {
    element.style.color = "white";
    element.style.height = "80%";
    //accessing the single properties of style one by one is the preferred way 
    //than changing the whole `style` string 
});

使用纯javascript覆盖全局css

5 个答案: