<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script>
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>