1.目的
爲兩個button添加單擊事件實現換膚功能
2.示例代碼
圖片及源碼的github鏈接
003.提取行間事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>003.提取行間事件</title>
<script type="text/javascript">
window.onload = function () {
// 爲兩個button添加單擊事件實現換膚功能
var oBtn = document.getElementById("btn1");
oBtn.onclick = fnChange;
function fnChange() {
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
// 匿名函數
var oBtn2 = document.getElementById("btn2");
oBtn2.onclick = function(){
var oDiv = document.getElementById('div1');
oDiv.style.color = "green";
oDiv.style.fontSize = "50px";
}
}
</script>
</head>
<body>
<div id="div1" onclick="fnMyalert()">這是一個div元素</div>
<input type="button" id="btn1" name="" value="改變div樣式">
<input type="button" id="btn2" name="" value="改變div樣式2">
</body>
</html>