communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > js循环改变div颜色具体方法_javascript技巧

js循环改变div颜色具体方法_javascript技巧

WBOY
Libérer： 2016-05-16 17:31:33
original
1920 Les gens l'ont consulté

在使用javascript过程中，想循环遍历一个数组，经常使用的语法有两种：

复制代码 代码如下:

 for (var i; i      statement;
 }
 for (var i in array) {
     statement;
 }

这两种用法看起来能做同样的事情，但实际上两个循环的循环次数一般是不一样的。
源码如下：
复制代码 代码如下:

 
 
 
 

 <script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for(var p in outerDiv) outerDiv[p].style.background = "red";<BR> };<BR> };<br><br> </script>
 
 
 

 
 

 

    

    

    

 

 
 

这段代码用了 for - in 语句做循环，看上去没有问题。
可是在浏览器调试的时候，会报错：
"Uncaught TypeError: Cannot set property 'background' of undefined"
为什么会这样呢？
如果我们把 stament 的内容改一下，就会发现问题了：
 for(var p in outerDiv) alert(p);
结果输出是：0 1 2 length item
所以，当 property 取到 length 和 item 时，再试图用调用 style 方法，当然就 undefined 了。 修改如下：

复制代码 代码如下:

 
 
 
 

 <script><BR> window.onload = function() {<BR> var obutton = document.getElementsByTagName("button")[0];<BR> var outer = document.getElementById("outer");<BR> var outerDiv = outer.getElementsByTagName("div");<BR> obutton.onclick = function() {<BR> for (var i = 0; i < outerDiv.length; i++){<BR> outerDiv[i].style.background = "red";<BR> }<BR> };<BR> };<br><br> </script>
 
 
 

 
 

 

    

    

    

 

 
 
Étiquettes associées：
div js 颜色
source：php.cn
Article précédent：JS实现的省份级联实例代码_javascript技巧 Article suivant：javascript中的绑定与解绑函数应用示例_javascript技巧
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Un pool de travail déclaré sur plusieurs routes peut-il toujours maintenir son utilisation du processeur sans se soucier du seuil J'espère trouver un système node.js avec un pool de travailleurs pour gérer les tâches gou...
Depuis 2024-04-06 19:54:23
0
1
444
Les points de nuage de points ne conservent pas leurs valeurs lors du zoom dans d3.js C'est la première fois que j'utilise d3.js, alors soyez indulgents avec moi. Je l'ai implé...
Depuis 2024-04-06 18:16:26
0
1
403
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
Doit-on utiliser SSG pour déployer des tableaux de bord créés avec Nuxt.js ? Nous développerons un tableau de bord à usage interne en utilisant Nuxt.js. Puisqu’il s’ag...
Depuis 2024-04-06 13:17:44
0
1
493
Electron obtient AppData en préchargement Comment obtenir le répertoire AppData préchargé ? Background.js[...]asyncfunctioncreateWin...
Depuis 2024-04-06 11:05:31
0
1
417
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal