Javascript小应用:动态样式控制方法。
方法一:使用style属性来设置
使用style属性来设置
html代码:
<div id="div1">123</div> //js var div1 = document.getElementById("div1"); div1.onclick = function () { //修改样式 div1.style.border = "1px solid red"; div1.style.width = "200 px"; div1.style.fontSize = "200px"; }
方法二:定义好类选择器的样式
定义好类选择器的样式,通过元素的ClassName
属性来设置其Class属性值,用的比较多
html代码:
<div id="div2">321</div> //CSS <style> .d1{ border: 1px solid red; width: 100px; height: 100px; } .d2{ border: 1px solid blue; width: 200px; height: 200px; } </style> //JS var div2 = document.getElementById("div2"); div2.onclick = function () { div2.className = "d1"; }
网友评论文明上网理性发言 已有0人参与
发表评论: