通过 getElementById 有多个 class，怎么修改某个指定 class 的样式？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2311 days ago, the information mentioned may be changed or developed.

把 .xyz { width: 100px } 改成 200px; 怎么通过 getElementById 的方式修改 class 中 xyz 的样式？

<div id="id123" class="abc zyz">hello</div>

.abc { font-size: 18px; }
.xyz { width: 100px; }

(getElementByclassname 的话，页面中 xyz 的总数不好确定，所以不想通过这个方式获取）

17 replies • 2020-02-29 15:26:34 +08:00

imn1

Feb 28, 2020

你是要 runtime 还是永久更改？
前者不需要理会 class，后者不是 javascript 的事

lisisi

Feb 28, 2020

@imn1 runtime，查了下貌似是用 classlist 解决

lisisi

Feb 28, 2020

@imn1 现在处理的方式很丑陋，把 xyz 先删了，再添加了一个新的 class。不了解怎么能直接修改掉 xyz 中的 width

imn1

Feb 28, 2020

@lisisi
我是搞不清楚
byId 获取的是唯一元素，直接改它的 width 属性就是了
难道你是想通过这个元素，找到某个 class，然后改掉，让其他也用这个 class 的元素也发生变化？

wangcheng

Feb 28, 2020

````javascript
const styleEl = document.createElement('style');
document.head.appendChild(styleEl);
styleEl.sheet.insertRule('.xyz { color: red }');
````

xzh654321

Feb 28, 2020

你意思想修改 id=123 且 class=xyz 的 div 的样式？

wangcheng

Feb 28, 2020

没明白你的目的是啥。
如果是想修改所有 class 为 xyz 的样式，那直接修改就好了。跟 getElementById 有什么关系？
如果是想修改 id123 这个元素的样式，直接修改它的样式就好了，为什么非要通过修改 xyz 这个 class 的样式来修改？

ironMan1995

Feb 28, 2020 via Android

可以用 querySelectorAll 或者 querySelector，不建议使用 getElementByClassName

ZredoC

Feb 28, 2020

#8 对的，看了下文档 querySelectorAll 是 H5

css 后定义的样式会覆盖掉原有的样式啊，有点没看懂到底想说啥

```
// 获取所有使用了 xyz 样式的元素数组
var elements = document.querySelectorAll(".xyz");
// 遍历修改
for (var i = 0; i < elements.length; i++) {
elements [i].style.width = 200px;
}
```

为什么会不好确定数量呢，总数不都是数组对象的 length 属性么

ZredoC

Feb 28, 2020 via Android

@ZredoC #9 elements[i] 无空格

ZredoC

Feb 28, 2020 via Android

@ZredoC "200px"🙄

randyo

Feb 28, 2020 via Android

不能改已写好的 CSS 文件，只能用新样式覆盖

jinliming2

Feb 28, 2020 via iPhone

> “ 页面中 xyz 的总数不好确定”？
首先，改某个 class 的样式，肯定是全局生效的（不考虑 shadowRoot ），所以你不可能单独改一个 element 上面 .xyz 的样式。
然后，改 class 样式的话，可以创建一个 style 标签，里面写覆盖样式，然后插入到 body 的最后面。
如果你只是想改单独的这一个 element 的样式的话，getElementById 之后，直接 element.style.width='200px' 就行。