javascript实现控制div颜色

本文详细介绍了如何使用JavaScript控制网页中DIV元素的背景颜色。通过实例代码，我们可以了解到如何通过JavaScript操作DOM来改变DIV的样式属性。下面我将逐一解析本文涉及的关键知识点。 我们从HTML结构开始了解。文中使用了HTML创建了一个DIV元素，并为其设置了一个初始的样式。这个DIV元素具有一个id属性，其值为"div1"，这使得它可以在JavaScript中通过document.getElementById()方法被轻易获取。 ```html <div id='div1'></div> ``` 接着，为了设置DIV的初始样式，文中使用了内联的style属性来设置宽度、高度以及背景颜色。这是最基础的CSS设置，用来控制HTML元素的显示效果。 ```css #div1 { width: 400px; height: 400px; background-color: red; } ``` 在上述CSS代码中，#div1是该DIV的ID选择器，确保这些样式只应用于id为"div1"的DIV元素。 接下来，是本文的核心内容——JavaScript代码部分。JavaScript通过函数来定义改变DIV背景颜色的操作。每个函数中都首先通过getElementById()方法获取到了id为"div1"的DIV元素。然后，通过修改其style.backgroundColor属性来实现背景颜色的改变。 ```javascript function blue() { div1 = document.getElementById('div1'); div1.style.backgroundColor = 'blue'; } function pink() { div1 = document.getElementById('div1'); div1.style.backgroundColor = 'pink'; } function black() { div1 = document.getElementById('div1'); div1.style.backgroundColor = 'black'; } ``` 在JavaScript代码中，定义了三个函数：blue()、pink()、black()，分别对应将DIV的背景颜色设置为蓝色、粉红色和黑色。在每个函数里，div1变量通过getElementById()方法指向了页面上ID为"div1"的DIV元素，并通过修改style.backgroundColor属性来改变背景色。 除了定义改变颜色的函数外，文中还展示了如何通过按钮触发这些函数。在HTML中创建了四个按钮，每个按钮通过onclick事件处理器触发一个函数。点击不同的按钮将会改变DIV元素的背景颜色。 ```html <button onclick='blue();'>blue</button> <button onclick='pink();'>pink</button> <button onclick='black();'>black</button> ``` 这段HTML代码定义了三个按钮，每个按钮点击后分别调用blue()、pink()和black()函数，从而改变DIV的背景颜色为预设的色彩。这展示了JavaScript事件处理的一个典型应用场景。 文中提到的wr()函数在提供的内容中没有给出实现细节，但可以猜测它可能是一个用来执行其他功能的函数。不过，由于信息不完整，无法对此进行具体分析。 总结起来，本文涉及了以下知识点： 1. HTML中DIV元素的创建和基本属性设置。 2. CSS中ID选择器的使用以及样式的定义。 3. JavaScript中DOM操作，通过getElementById()获取特定元素。 4. JavaScript对象属性的修改，这里特指style.backgroundColor属性的修改。 5. JavaScript函数的定义和使用，以及事件处理器 onclick的使用。 这些知识点是Web前端开发中非常基础且常用的技术，对于初学者而言，通过本文的内容，可以快速理解如何使用JavaScript来操作DOM，并实现用户交互功能。通过修改背景颜色这个简单的例子，可以加深对JavaScript事件驱动编程模式的理解。