Cet article décrit principalement comment utiliser JavaScript pour modifier le style en ligne et le style de classe dans le style CSS, simplifier le processus opérationnel quotidien et créer l'interface HTML plus concis.
Contenu en html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css操作</title>
<style>
.bgn-cyan{
background-color: cyan;
}
.bgn-yellow{
background-color: #ff0;
}
.border{
border:3px solid #000;
}
.bolder{
font-weight: bolder;
}
p{
height: 25px;
}
</style>
</head>
<body>
</body>
</html>1. Style en ligne
<script>
//获取p标签元素
const p=document.querySelector("p");
//验证是否获取成功
console.log(p);
p.style.color="red";
</script>2. Style de cours
<script>
const p=document.querySelector("p");
//添加类样式
p.classList.add("bgn-cyan");
//添加多个类样式
p.classList.add("border","bolder");
//对于样式的移除
p.classList.remove("bolder","border");
//对样式的替换
p.classList.replace("bgn-cyan","bgn-yellow");
//对是否有这个样式进行取反
p.classList.toggle("bgn-cyan");
//原有样式（"bgn-cyan"）被替换过后replace("bgn-cyan","bgn-yellow") 使用toggle("bgn-cyan")无法实现
</script>Recommandé : "Questions et réponses de l'entretien js 2021 (grand résumé)"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
