中心主题:利用for循坏获取到div元素并设置它的属性。
一、HTML结构
<input type="button" value="点击切换颜色"/> <div></div> <div></div> <div></div>
二、css样式
div{ width:200px; height:200px; background-color: white; border:2px solid black; }
三、js
window.onload = function () { var oDiv = document.getElementsByTagName("div"); var oBtn = document.getElementsByTagName("input")[0]; oBtn.onclick = function () { for(var i = 0; i < oDiv.length; i++) oDiv[i].style.background = "red"; } }
四、jquery
$("input").click(function(){ $("div").css("background-color","skyblue"); });
五、最终样式
变换前:
变换后: