????：<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <ti
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>JavaScript事件</title>
<style>
body {
background: #333;
}
.box {
width: 100px;
margin: 200px auto 0;
text-align: center;
cursor: pointer;
}
.ball {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 0 0 20px #111;
}
p {
margin-top: 50px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 6px 3px #999;
}
</style>
</head>
<body>
<div class = "box">
<div class = "ball"></div>
<p>點擊開燈</p>
</div>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var body = document.getElementsByTagName('body')[0];
var box = document.getElementsByClassName('box')[0];
var ball = document.getElementsByClassName('ball')[0];
var text = document.getElementsByTagName('p')[0];
box.onclick = function () {
if (body.style.backgroundColor != 'rgb(238, 238, 238)') {
body.style.backgroundColor = 'rgb(238, 238, 238)';
ball.style.boxShadow = '0 0 100px yellow';
text.innerText = '點擊關燈';
text.style.color = '#999';
} else {
body.style.backgroundColor = '#333';
// 請問老師：下面為什么打印出來是 rgb(51, 51, 51) ，不是 #333 ？
// console.log(body.style.backgroundColor);
ball.style.boxShadow = '0 0 20px #111';
console.log(text);
text.innerText = '點擊開燈';
text.style.color = 'rgba(255, 255, 255, 0.5)';
}
}
/*
常用事件
下面是一個屬性列表，這些屬性可以插入HTML標簽來定義事件動作
屬性 描述
onload 一張頁面或一幅圖像完成加載
onfocus 元素獲得焦點
onblur 元素失去焦點
onchange 域的內容被改變
onsubmit 確認按鈕被點擊
onclick 點擊時
ondblclick 雙擊時
onkeydown 某個鍵盤按鍵被按下
onkeyup 某個鍵盤按鍵被松開
onkeypress 某個鍵盤按鍵被按下并松開
onmousedown 鼠標按鈕被按下
onmouseup 鼠標按鍵被松開
onmousemove 鼠標被移動
onmouseover 鼠標移動到某元素之上
onmouseout 鼠標從某元素移開
*/
</script>
</html>
?? ???：韋小寶?? ??：2019-02-11 10:27:06
???? ??：你把前面的backgroundColor也都改成不是rgb的形式你再看看！