abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js控制css案例</title> </head> <style> #div{ height: 100px;width:&n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js控制css案例</title> </head> <style> #div{ height: 100px;width: 100px;background: red; } </style> <body> <div id="div"></div> <input type="button" value="變高" onclick="a()"> <input type="button" value="變寬" onclick="b()" > <input type="button" value="變色" onclick="c()" > <input type="button" value="重置" onclick="d()" > <input type="button" value="隱藏" onclick="e()" > <input type="button" value="顯示" onclick="f()"> <script> var div ; window.onload=function(){ div = document.getElementById('div'); } function a(){ div.style.height = "400px" } function b(){ div.style.width = "400px" } function c(){ div.style.background = "pink" } function d(){ div.style.height = "100px" div.style.width = "100px" div.style.background = "red" } function e(){ div.style.display = "none" } function f(){ div.style.display = "block" } </script> </body> </html>
創(chuàng)建一個函數(shù),通過document.getElementById獲取要修改的div的id。然后根據(jù)函數(shù)名.style.屬性進(jìn)行各項(xiàng)的修改
Correcting teacher:韋小寶Correction time:2018-11-03 09:17:53
Teacher's summary:寫的很不錯!但是總結(jié)再多點(diǎn)就完美了!不過值得一贊哦!繼續(xù)加油吧!騷年!!