JavaScript设置和修改CSS样式
语法:
nodeObject.style.cssProperty=newStyle
其中,nodeObject 为节点对象,cssProperty 为CSS属性,newStyle 为CSS属性的值。
注意:对于由 “ - ” 分隔的CSS属性,要去掉 “ - ” ,并将 “ - ” 后的第一个字母大写。
例如:
document.getElementById("demo").style.height = "50px" ;
document.getElementById("demo").style.border = " 1px solid #ddd ";
document.getElementById("demo").style.backgroundColor = " #ccc ";
document.getElementById("demo").style.textAlign = " center ";举例,设置 id="demo"的节点的样式:
<style>
#demo{
height:50px;
width:250px;
margin-top:10px;
text-align:center;
line-height:50px;
background-color:#ccc;
}
</style>
<div id="demo">
点击这里改变CSS样式
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
this.style.height = " 70px ";
this.style.lineHeight = " 70px ";
this.style.backgroundColor = " #000 ";
this.style.color=" #fff ";
}
</script>
neue Datei
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#demo{
height:50px;
width:250px;
margin-top:10px;
text-align:center;
line-height:50px;
background-color:#ccc;
}
</style>
<div id="demo">
点击这里改变CSS样式
</div>
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
this.style.height = " 70px ";
this.style.lineHeight = " 70px ";
this.style.backgroundColor = " #000 ";
this.style.color=" #fff ";
}
</script>
</head>
<body>
</body>
</html>
Vorschau
Clear
Auch Studierende, die diesen Kurs gesehen haben, lernen
Lassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen
Kurze Einführung in die Web-Frontend-Entwicklung
Umfangreiche, praktische Tianlongbabu-Entwicklung eines Mini-Version-MVC-Frameworks, das die Enzyklopädie-Website mit peinlichen Dingen imitiert
Erste Schritte mit der praktischen PHP-Entwicklung: Schnelle PHP-Erstellung [Small Business Forum]
Anmeldebestätigung und klassisches Message Board
Wissenssammlung über Computernetzwerke
Schnellstart-Node.JS-Vollversion
Der Frontend-Kurs, der Sie am besten versteht: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Schreiben Sie Ihr eigenes PHP-MVC-Framework (40 Kapitel ausführlich/große Details/Muss gelesen werden, damit Neulinge vorankommen)
















Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit 