js怎么给元素添加样式框,js 怎么给内容添加样式

本文链接：https://blog.csdn.net/ai_lover_cat/article/details/133824361

大家好，小编来为大家解答以下问题，怎么在js中给元素添加属性，js给元素添加自定义属性，现在让我们一起来看看吧！

element.style 行内样式操作
element.className 类名样式操作

1. element.style

上下文是获取到的元素；
通过element.style.某个css样式设置某个css样式的值；
js里采用驼峰命名法，比如设置字体大小，element.style.fontSize = “10px”；
采用element.style是给元素加了行内样式，css权重比较高；
一般是用在修改样式较少的情况下使用。

<body>
	<div class="box">内容</div>
</body>

<style>
	.box {
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
</style>

<>
	const box = document.querySelector(".box");
	box.style.fontSize = "20px";
	box.style.backgroundColor = "pink";
	
</>

在这里插入图片描述

从下面可以看到加到了行内样式中：

2. element.className

上下文是获取到的元素；
如果修改的样式较多，建议使用这个；
使用element.className = "类名"来给某个元素添加类名；
注意：className会直接更改元素的类名，会覆盖之前已有的类名，如果想要保留之前已有的类名(比如之前已有的类名是.first .second，新添加的类名是.third)可以这样写： element.className = “first second third”GPT改写。

<body>
	<div class="box">内容</div>
</body>

<style>
	.box {
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
	// 在style先写好要添加的类名
	.first {
		margin-top: 50px;
		padding: 50px;
		font-size: 20px;
		color: red;
	}
</style>

<>
	const box = document.querySelector(".box");
	// 如果不保留之前的类名可以这样些 box.className = "first";

	// 保留之前的类名
	box.className = "box first";
</>

在这里插入图片描述
添加类名之后效果如下：