Home Web Front-end JS Tutorial js循环改变div颜色具体方法_javascript技巧

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

May 16, 2016 pm 05:31 PM
div js color

在使用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>
 
 
 

 
 

 

    

    

    

 

 
 
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

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 create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

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 with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

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

How to change the color of the Windows 10 taskbar How to change the color of the Windows 10 taskbar Jan 01, 2024 pm 09:05 PM

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.

Vivo's new X100 series memory, color exposure: all series start at 12+256GB Vivo's new X100 series memory, color exposure: all series start at 12+256GB May 06, 2024 pm 03:58 PM

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

Do you know how to set the color of WPS document table? Do you know how to set the color of WPS document table? Mar 20, 2024 am 08:19 AM

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.

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

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 The relationship between js and vue Mar 11, 2024 pm 05:21 PM

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.

See all articles