Heim >Web-Frontend >js-Tutorial >So verwenden Sie JS zum Ändern von CSS-Stilen
So verwenden Sie JS zum Ändern von CSS-Stilen
- autoloadOriginal
- 2021-04-08 14:35:552128Durchsuche
In diesem Artikel wird hauptsächlich beschrieben, wie Sie die JavaScript对CSS样式中的行内样式和类样式进行更改，简化日常的操作流程，让HTML-Benutzeroberfläche einfacher nutzen können. Inhalt in
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. Inline-Stil
<script>
//获取p标签元素
const p=document.querySelector("p");
//验证是否获取成功
console.log(p);
p.style.color="red";
</script>2. Klassenstil
<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>Empfohlen: " Fragen und Antworten zum js-Interview 2021 (große Zusammenfassung) 》
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS zum Ändern von CSS-Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So löschen Sie bestimmte Elemente eines Arrays in JavascriptNächster Artikel：So löschen Sie bestimmte Elemente eines Arrays in Javascript