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>
新しいファイル
<!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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
