Maison > Article > interface Web > Exemple de style de paramètre dynamique JavaScript, compétences d'analyse_javascript

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

WBOYoriginal: 2016-05-16 15:59:311331parcourir

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 individuellementa133c2fffc719895a276341b8b5a08c3

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>

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>

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode JavaScript pour implémenter le glissement de couche DIV et ajouter dynamiquement de nouvelles compétences layer_javascriptArticle suivant：Méthode JavaScript pour implémenter le glissement de couche DIV et ajouter dynamiquement de nouvelles compétences layer_javascript

Articles Liés

Voir plus