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

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

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

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

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

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

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

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

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

#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 #9 elements[i] 无空格

@ZredoC "200px"

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

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

你需要 jQuery

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

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

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

然后给 element 加个 width200 的 class