使用文档对象模型更改按钮单击的颜色和样式

Question

编写程序以更改div的颜色，其浮动样式和边框使用文档对象模型单击按钮。

Answer 1

假设您有这样的div：

<div id="my-div"></div>

然后您可以使用javascript将元素加载到变量中：

var myDiv = document.getElementById('my-div');

完成之后，您可以使用常规模式来更改其任何属性：

element.style.property = value;

例如，将颜色更改为红色，您可以这样做：

myDiv.style.color = 'red';

要使元素对按钮单击做出反应，请为其提供事件监听器。

myDiv.addEventListener('click', myFunction, false);

我们现在必须定义我们要myFunction执行的操作。如果我们希望颜色变为红色，则可以通过以下方式定义它：

function myFunction() {
  myDiv.style.color = 'red';
}

这里是该脚本的工作代码段：

var myDiv = document.getElementById('my-div');
myDiv.addEventListener('click', myFunction, false);

function myFunction() {
  myDiv.style.color = 'red';
}

<div id="my-div">Here is some text.</div>

单击文本，它将变成红色！您可以对要更改的其他属性执行相同的操作。