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

[lisisi]

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

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

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

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

[imn1]

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

[lisisi]

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

[lisisi]

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

[imn1]

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

[wangcheng]

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

[xzh654321]

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

[wangcheng]

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

[ironMan1995]

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

[ZredoC]

#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]

@ZredoC #9 elements[i] 无空格

[ZredoC]

@ZredoC "200px"🙄

[randyo]

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

[jinliming2]

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

[ajaxfunction]

你需要 jQuery

[mostkia]

建议准备好需要的 style，然后改 class 名称调用就可以了。只有未知的或者是实时计算得出的 style 才没法预先写到 css 文件里。

[mxT52CRuqR6o5]

直接行内样式怼上去里就完事了

[kyuuseiryuu]

定义一个新的样式
.xyz .width200 {
width: 200px;
}

然后给 element 加个 width200 的 class