JSでCSSスタイルを修正する
1814 ワード
JSでCSSスタイルを変更するには、次の2つの方法があります.ある属性の値 を修正する.ある要素のclass名を修正し、別のスタイルで を修飾する.
属性の値の変更
属性の値の変更
<script type="text/javascript">
function changeBg(){
var bgColor="";
for(var i = 0;i<6;i++){
bgColor += ""+Math.round(Math.random()*9);
}
document.body.style.backgroundColor="#"+bgColor;
}
document.onclick = changeBg;
</script>
</code></pre>
<p> ， for 6 #， （ 。 ：#324254）， body background-color（JS backgroundColor）， </p>
<h2> class </h2>
<pre><code>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title/>
<script type="text/javascript">
function chg(){
document.getElementById("up").className="solid";
}
</script>
<style type="text/css">
.solid{
width: 160px;
padding: 6px;
text-align: center;
border-right: #222 4px solid;
border-top: 4px solid #ddd;
border-left: 4px solid #ddd;
border-bottom: 4px solid #222;
background-color: #ccc;
}
</style>
<div id="up">whoami</div>
<input type="button" name="a" value=" " onclick="chg();"/>
</code></pre>
<p> JS， id “up” class solid， .solid ， </p>
<p> </p>
<p> </p>
<p> ， ， ， ， </p>
</div>
</div>
</div>
</div>