摘要：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="shortcut icon" type="image/x-icon" href="">
<style type="text/css">
#box{background: pink;width: 200px;height: 200px;margin: 20px 80px;}
</style>
<body>
<div id="box"></div>
<input type="button" name="高度" value="高度" onclick="changeHeight()">
<input type="button" name="寬度" value="寬度" onclick="changeWidth()">
<input type="button" name="顏色" value="顏色" onclick="changeColor()">
<input type="button" name="重置" value="重置" onclick="resetBox()">
<input type="button" name="隱藏" value="隱藏" onclick="hiddenBox()">
<input type="button" name="顯示" value="顯示" onclick="showBox()">
<script type="text/javascript">
var box;
window.onload = function () {
box = document.getElementById("box");
}
function changeHeight(){
box.style.height ="400px";
}
function changeWidth(){
box.style.width ="400px";
}
function changeColor(){
box.style.background ="skyblue";
}
function resetBox(){
box.style.width ="200px";
box.style.height ="200px";
box.style.background ="pink";
}
function hiddenBox(){
box.style.display ="none";
}
function showBox(){
box.style.display ="block";
}
</script>
</body>
</html>
總結(jié)：在編寫過程中，我一開始給重置、隱藏和顯示的點擊事件命名為reset()、hidden()、show()。但在實際顯示過程中，谷歌瀏覽器會對hidden()有錯誤提示“Uncaught TypeError: hidden is not a function at HTMLInputElement.onclick”，這個問題出現(xiàn)，查了一下網(wǎng)上資料，hidden ()和谷歌一些內(nèi)置的有沖突，然后修改了一下方法名，編譯通過，沒有錯誤。
從這個中，知道了在編寫js代碼時要注意方法的命名，防止出現(xiàn)與瀏覽器沖突的情況。
批改老師：韋小寶批改時間：2019-02-21 11:41:06
老師總結(jié)：在編寫代碼的過程中難免會出現(xiàn)報錯 這些都是很正常的 只有遇到的錯誤多了 下次見到了才能更熟悉