Question

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

如果我在文件xyz.css中定义了上面的css类，我想动态地更改属性＆＃34; overflow＆＃34;到＆＃34;隐藏＆＃34;使用JavaScript，它怎么做？

Answer 1

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

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

var elements = document.getElementsByClassName('gridArea');

for (var i = 0; i < elements.length; i++) {
    elements[i].style["overflow"]="hidden";
}

或者如果你愿意尝试jquery（这只是一个免费的javascript扩展，你可以在一行中完成：

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

Answer 2

更改当前和未来元素的属性的最简单方法是在动态创建的样式表元素中覆盖overflow属性的值：

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

DEMO：http://jsbin.com/galicuto/1/edit

如果您只需要更改单个元素的值，可以通过style属性更改它：

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

如果要为文档中当前的所有元素更改它，您可以执行相同的操作，但会迭代document.querySelectorAll给出的结果。

Answer 3

使用查询选择器

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

使用javascript动态更改css属性

3 个答案: