demo.html：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
background-color: pink;
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;"></div>
<script>
//赋值：div.style.....
var div = document.getElementsByTagName("div")[0];
div.style.width = "1000px";
//div.style["width"]= "1000px"; //为CSS属性赋值
//获取值：(只能获取/设置行内样式,且无法获取/设置复杂值的属性值)
//console.log(div.offsetWidth); //获取值，返回数字类型，包括padding和border
//console.log(div.style.width); //获取/赋值，返回字符串类型，不包括padding和border (只能获取行内样式)
//console.log(div.style.border); //无法获取复杂值的属性值。
//获取行内样式和内嵌样式 (不兼容)
//console.log(window.getComputedStyle(div,null).border); //一次性获取所有样式，通过参数指定获取哪个样式
//console.log(window.getComputedStyle(div,null)["background-color"]);
//获取行内样式和内嵌样式 (不兼容)
//console.log(div.currentStyle.padding);
//console.log(div.currentStyle["background-color"]);
//兼容方法获取元素样式的封装函数 (包括行内样式和内嵌样式)
function getStyle(ele,attr){
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
console.log(getStyle(div,"padding"));
console.log(getStyle(div,"background-color"));
</script>
</body>
</html>
8197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
