JavaScript動的設定スタイル例分析_JavaScriptスキル-jsチュートリアル-php.cn

JavaScript動的設定スタイル例分析_JavaScriptスキル

WBOY

リリース： 2016-05-16 15:59:31

オリジナル

1336 人が閲覧しました

この記事の例では、JavaScriptを使用して動的にスタイルを設定する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

スタイルの動的変更

1. エラーが発生しやすい: 要素のスタイルを変更するには、class 属性を設定するのではなく、className 属性を設定します。
2. エラーが発生しやすい: スタイル属性を個別に変更するには、「style.attribute name」を使用します。CSS の属性名は JavaScript

であることに注意してください。

属性名は、主に属性名に - が含まれる属性に焦点を当て、操作中に異なる場合があります。理由は

JavaScript では、属性とクラス名は使用できません。したがって、CSS の背景色は、background-clolor ですが、JavaScript では、要素のスタイル名は class、JavaScript では、className 属性です。 ->スタイル .marginTop

3. コントロールのスタイルを個別に変更します

1. 例 1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态修改style</title>
 <style type="text/css">
 .day
 {
 background-color:Green;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function dayclick() {
 var divMain = document.getElementById("divMain");
 //注意这里使用的是className而不是class
 divMain.className = "day";
 }
 function nightclick() {
 var divMain = document.getElementById("divMain");
 divMain.className = "night";
 }
 </script>
</head>
<body>
 <div id="divMain" class="day">
 <font color="red">中华人名共和国</font>
 </div>
 <input type="button" value="白天" onclick="dayclick()" />
 <input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>

ログイン後にコピー

2. 例: スタイルを動的に変更する (照明のオン/オフをシミュレートします)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
 .day
 {
 background-color:White;
 }
 .night
 {
 background-color:Black;
 }
 </style>
 <script type="text/javascript">
 function switchLight() {
 var btnSwitch = document.getElementById("btnSwitch");
 if (document.body.className == "day") {
 document.body.className = "night";
 btnSwitch.value = "开灯";
 }
 else {
 document.body.className = "day";
 btnSwitch.value = "关灯"; 
 }
 }
 </script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()"/>
</body>
</html>

ログイン後にコピー

3. 例:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>动态设置style练习(修改文本框背景色)</title>
 <script type="text/javascript">
 function IniEvents() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
 if (inputs[i].type == "text") {
  //设置txtOnBlur函数为input元素的onblur事件的响应函数
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的响应函数，而不是被响应函数调用
 的函数，所有可以用this来取的发生事件控件的对象
 */
 if (this.value.length <= 0) {
 this.style.background = "red";
 }
 else {
 this.style.background = "white";
 }
 }
 </script>
</head>
<body onload="IniEvents()">
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
 <input type="text" /><br />
</body>
</html>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。