js循环改变div颜色具体方法_javascript技巧
在使用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>

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

It is very simple to modify the taskbar color in Windows 10, but many users find that they cannot set it. In fact, it is very simple. Just choose your favorite color in the personalization of the computer. If you cannot change the color, pay attention to the detailed settings. How to change the color of the win10 taskbar Step 1: Right-click on the desktop - click Personalize Step 2: Customize the color area Step 3: Choose your favorite color PS: If you cannot change the color, you can click Color -> Select Color -> Customize->Default windows mode, select dark color.

According to news on May 6, vivo officially announced today that the new vivoX100 series will be officially released at 19:00 on May 13. It is understood that this conference is expected to release three models, vivoX100s, vivoX100sPro, and vivoX100Ultra, as well as vivo's self-developed imaging brand BlueImage blueprint imaging technology. Digital blogger "Digital Chat Station" also released the official renderings, memory specifications and color matching of these three models today. Among them, X100s adopts a straight screen design, while X100sPro and X100Ultra have curved screen designs. The blogger revealed that vivoX100s comes in four colors: black, titanium, cyan, and white. The memory specifications

When we see the table colors in other people's WPS documents, the effects are colorful and beautiful; but we only have monotonous black. If you have to fill the table with colors, I believe many students will do it. However, if you want to set the color of the table in WPS document China, many students will definitely find it confusing! Today, let’s learn how to set the color of the WPS document table. I have put together a document that I hope will be helpful to everyone. The steps are as follows: 1. We need to draw a table in the WPS document and right-click the table where the line color is to be modified. 2. Next, use the mouse to click [right mouse button] on the table; in the pop-up menu, we find [Border and Shading]. 3. At this time, the [Border and Shading] option will be opened.

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.
