html 给class上加样式
时间: 2023-07-06 07:23:06 浏览: 45
可以使用 CSS 来给 HTML 中的 class 添加样式,例如:
```html
<div class="my-class">Hello World!</div>
```
```css
.my-class {
color: red;
font-size: 16px;
}
```
这里的 `.my-class` 表示选择所有 class 名为 `my-class` 的元素,并给它们添加样式。在这个例子中,我们给这些元素添加了红色字体和 16 像素的字号。
相关问题
js给class添加css样式
可以使用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的classList往里面加样式
可以通过`add()`方法向元素的classList中添加一个或多个CSS类名,从而为元素添加样式。例如,以下代码将向id为myElement的元素添加class为"active"和"class2"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.classList.add("active", "class2");
```
这将在元素上添加以下类名:
```html
<div id="myElement" class="active class2"></div>
```
如果要从元素的classList中删除类名,可以使用`remove()`方法。例如,以下代码将从id为myElement的元素中删除class为"active"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.classList.remove("active");
```
这将在元素的class属性中移除"active"类名:
```html
<div id="myElement" class="class2"></div>
```
你也可以使用`toggle()`方法来添加或删除类名。如果类名已经存在,则该方法将从元素的classList中删除该类名。否则,它将向classList中添加该类名。例如,以下代码将在单击元素时切换class为"active"的样式:
```javascript
var myElement = document.getElementById("myElement");
myElement.addEventListener("click", function() {
this.classList.toggle("active");
});
```