夜光序言:
真正高明的人,就是能够借助别人的智慧,来使自己不受蒙蔽的人
正文:
JavaScript HTML DOM - 改变CSS
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
嗯唔~~ 会改变 <p> 元素的样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p id="p1">Genius Team 001</p>
<p id="p2">Genius Team 002</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>夜光:以上段落通过脚本修改</p>
</body>
</html>
嗯唔:使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件:
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
- ……
例子中:改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<h1 id="id1">我的标题~~</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我~~</button>
</body>
</html>
我们再看一个:JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
οnclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
当用户在 <h1> 元素上点击时,会改变其内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<h1 onclick="this.innerHTML='Genius Team'">点击文本~~试试</h1>
</body>
</html>
从事件处理器调用一个函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<head>
<script>
function changetext(id){
id.innerHTML="Genius Team";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本~~试试</h1>
</body>
</html>
HTML 事件属性
如需向 HTML 元素分配 事件
我们可以使用事件属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>有点意思:点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
嗯唔~~ HTML 事件属性
如果,我们要向 HTML 元素分配 事件
我们可以使用事件属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
嗯唔:使用 HTML DOM 来分配事件
HTML DOM
允许我们使用 JavaScript 来向 HTML 元素分配事件:
名为 displayDate 的函数被分配给 id="myBtn" 的 HTML 元素。
按钮点击时Javascript函数将会被执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<head>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
我们可以使用 removeEventListener() 方法来移除事件的监听。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>嗯唔:该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
嗯唔:语法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>嗯唔:该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Genius Team");
});
</script>
</body>
</html>
向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同一个元素添加多个事件,且不会覆盖已存在的事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>嗯唔:该实例使用 addEventListener() 方法在按钮中添加点击事件 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Genius Team");
});
</script>
</body>
</html>
嗯唔:向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。
或者其他支出的事件对象如: xmlHttpRequest 对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>嗯唔:在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>
</body>
</html>
传递参数
当传递参数值时,使用"匿名函数"调用带参数的函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>夜光</title>
</head>
<body>
<p>夜光:实例演示了在使用 addEventListener() 方法时如何传递参数</p>
<p>点击按钮执行计算</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 1111;
var p2 = 1;
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});
function myFunction(a, b) {
var result = a * b;
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>