使用javascript动态更改css属性

如果我在一个文件xyz.css中定义了上述css类，并且我想使用JavaScript动态地将属性从“溢出”更改为“隐藏”，那么该如何实现呢

有人解释说，你显然可以改变css

或者您可以更改元素，而不是触摸css

.gridArea {
  margin-left: 12px;
  margin-bottom: 12px;
  height: 200px;
  width: 98%;
  overflow: auto;
  border: solid 1px #333366;
}

---

更改当前和未来元素的属性的最简单的解决方案是在动态创建的样式表元素中重写

溢出

属性的值：

$(".gridArea").css({"overflow":"hidden"});

演示：

如果只需要更改单个元素的值，则可以通过“样式”属性进行更改：

var s = document.createElement('style');
s.innerHTML = '.gridArea {overflow: hidden;}';
document.querySelector('head').appendChild(s);

如果要为文档中当前的所有元素更改它，可以执行相同的操作，但要使用查询选择器迭代

document.querySelectorAll

给出的结果

var el = document.querySelector('.gridArea');
el.style.overflow = 'hidden';

---

我有两种方法可以尝试，一种是使用.attr（）方法，另一种是创建第二个类来执行您想要的操作，并使用addClass（）和removeClass（）methods@mmeasor这是jQuery，他要的是javascript。

var el = document.querySelector('.gridArea');
el.style.overflow = 'hidden';

var el = document.querySelector('.gridArea');
el.style.overflow = "hidden";