js给class添加css样式
时间: 2023-11-13 08:04:40 浏览: 53
可以使用JavaScript操作DOM来为HTML中的元素添加CSS样式。如果要为一个class名称为"my-class"的元素添加CSS样式,可以使用如下代码:
```javascript
var myElement = document.querySelector(".my-class");
myElement.style.color = "red";
myElement.style.fontSize = "20px";
```
上述代码中,首先使用document.querySelector()方法获取class名称为"my-class"的元素,然后通过设置元素的style属性,来为其添加CSS样式。在此例中,我为元素设置了颜色为红色,字体大小为20像素。
相关问题
js通过class修改css样式属性
在 JavaScript 中,也可以通过获取 DOM 元素的 class 属性,来修改其 CSS 样式属性。例如,想要修改一个 class 为 "myClass" 的元素的背景颜色,可以使用以下代码:
```javascript
var elements = document.getElementsByClassName("myClass");
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "red";
}
```
这里,我们首先通过 `document.getElementsByClassName()` 获取了所有 class 为 "myClass" 的元素,然后通过循环遍历每个元素,并通过 `style` 属性获取其样式对象,最后通过修改 `backgroundColor` 属性来改变元素的背景颜色。
注意,在使用 `getElementsByClassName()` 方法获取元素时,返回的是一个类数组对象,需要通过循环遍历每个元素。此外,如果要修改的样式属性名含有多个单词,需要使用驼峰式命名法(如 `backgroundColor`),而不是使用连字符(如 `background-color`)。
js 添加css样式
在JavaScript中,可以通过`.style.xxxx`属性来添加或修改CSS样式。具体的操作是使用等号赋值的方式,如`document.getElementById("xx").style.xxx=xxxxx;`。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [JS添加/修改CSS样式](https://blog.csdn.net/godot06/article/details/122197030)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [如何用js动态添加css](https://blog.csdn.net/hdxx2022/article/details/129499950)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]