Exemple de style de paramètre dynamique JavaScript, compétences d'analyse

Exemple de style de paramètre dynamique JavaScript, compétences d'analyse_javascript

WBOY

Libérer： 2016-05-16 15:59:31

original

1335 Les gens l'ont consulté

L'exemple de cet article décrit la méthode de définition dynamique du style à l'aide de javascript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Modification dynamique du style

1. Sujet aux erreurs : modifier le style d'un élément ne consiste pas à définir l'attribut class, mais l'attribut className.
2. Sujet aux erreurs : utilisez "style.attribute name" pour modifier les attributs de style individuellement. Notez que le nom de l'attribut en CSS est en JavaScript

Les noms d'attributs peuvent être différents pendant le fonctionnement, en se concentrant principalement sur les attributs dont les noms d'attributs contiennent -, car

En JavaScript - les attributs et les noms de classe ne peuvent pas être utilisés. Par conséquent, la couleur d'arrière-plan en CSS est background-clolor, alors qu'en JavaScript c'est style.background ; le nom du style d'élément est class, et en JavaScript c'est l'attribut className ; -> style .marginTop

3. Modifier le style du contrôle individuellement

1. Exemple 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>

Copier après la connexion

2. Exemple : modifier dynamiquement le style (simuler l'allumage et l'extinction des lumières)

<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>

Copier après la connexion

3. Exemple :

<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>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.