window.onload = function(){ /** * 点击按钮以后 修改box1 的大小 */ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
// 修改 box1 的宽度 /** * 通过 js 修改元素的样式 * 语法: 元素.style.样式名 = 样式值 */ box1.style.width = '300px'; box1.style.height = '300px'; box1.style.backgroundColor = 'yellow'; }
// 读取 元素的样式 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ // 读取 box1 的样式 /** * 语法: 元素.style.样式名 * 通过 style 属性设置 和读取的 都是 内连样式 * 无法读取样式表中的样式 */ // alert(box1.style.width)
/** * 获取元素的当前显示的样式 只能读 不能修改 * 语法: 元素.currentStyle.样式名 --> 只支持ie * 可以读当前元素显示的样式 * window.getComputedStyle(元素 null)[样式名] -> 其它浏览器 使用这个 ->不支持 ie8 以下的浏览器 * window.getComputedStyle(元素 null).样式名 * 如果获取的样式 没有设置 则会获取到真实的值 而不是默认值 */ console.log(getStyle(box1,'width')); } /** * 定义一个函数 用来获取指定元素的当前的样式 * 参数 * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj,name){ if(window.getComputedStyle){ // 正常浏览器的方式 return getComputedStyle(obj,null)[name]; }else{ // ie8 的方式 return obj.currentStyle[name]; } }
}
</script> </head> <body>
<button id="btn01">点我一下</button> <button id="btn02">点我一下2</button> <br /> <br /> <div id="box1"> </div> </body> </html>