一、Window.getComputedStyle
- 获取的宽高不包括 border 和 padding
- 既可以获取行内样式设置的宽高
- 又可以获取CSS文件设置的宽高
- 只读
- 不支持 IE8 及更早版本
1.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>getComputedStyle</title>
<style>
#css {
width: 100px;
height: 100px;
border: 50px solid black;
padding: 50px;
margin: 50px;
background: blue;
}
</style>
</head>
<body>
<div
id="inline"
style="
width: 100px;
height: 100px;
background: green;
border: 50px solid black;
padding: 50px;
margin: 50px;
"
></div>
<div id="css"></div>
<script>
const inline = document.getElementById("inline");
const css = document.getElementById("css");
const inlineStyle = getComputedStyle(inline);
const cssStyle = getComputedStyle(css);
console.log("inlineStyle.width:", inlineStyle.width);
console.log("inlineStyle.height:", inlineStyle.height);
console.log("cssStyle.width:", cssStyle.width);
console.log("cssStyle.height:", cssStyle.height);
inlineStyle.height = "300px";
</script>
</body>
</html>
<!--输出结果-->
inlineStyle.width: 100px
inlineStyle.height: 100px
cssStyle.width: 100px
cssStyle.height: 100px
Uncaught DOMException: CSS2Properties.height setter: Can't set value for property 'height' in computed style
二、Element.currentStyle
- 获取的宽高不包括 border 和 padding
- 既可以获取行内样式设置的宽高
- 又可以获取CSS文件设置的宽高
- 只读
- 只支持 IE8 及更早版本
2.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>currentStyle</title>
<style>
#css {
width: 100px;
height: 100px;
border: 50px solid black;
padding: 50px;
margin: 50px;
background: blue;
}
</style>
</head>
<body>
<div
id="inline"
style="width: 100px; height: 100px; border: 50px solid black;padding: 50px; margin: 50px; background: green;"
></div>
<div id="css"></div>
<script>
var inline = document.getElementById("inline");
var css = document.getElementById("css");
var inlineStyle = inline.currentStyle;
var cssStyle = css.currentStyle;
console.log("inlineStyle.width:", inlineStyle.width);
console.log("inlineStyle.height:", inlineStyle.height);
console.log("cssStyle.width:", cssStyle.width);
console.log("cssStyle.height:", cssStyle.height);
inlineStyle.height = "300px";
</script>
</body>
</html>
<!---->
SCRIPT438: 对象不支持此属性或方法 currentStyle.html (32,7)
inlineStyle.width: 100px
inlineStyle.height: 100px
cssStyle.width: 100px
cssStyle.height: 100px
三、Element.style
- 元素内联样式属性
- 无法其他地方声明的样式，如 部分的内嵌样式表，或外部样式表
- 要获取一个元素的所有 CSS 属性，你应该使用 window.getComputedStyle()
3.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Style</title>
<style>
#css {
width: 100px;
height: 100px;
border: 50px solid black;
padding: 50px;
margin: 50px;
background: blue;
}
</style>
</head>
<body>
<div
id="inline"
style="
width: 100px;
height: 100px;
background: green;
border: 50px solid black;
padding: 50px;
margin: 50px;
"
></div>
<div id="css"></div>
<script>
const inline = document.getElementById("inline");
const css = document.getElementById("css");
const inlineStyle = inline.style;
const cssStyle = css.style;
console.log("inlineStyle.width:", inlineStyle.width);
console.log("inlineStyle.height:", inlineStyle.height);
console.log("cssStyle.width:", cssStyle.width);
console.log("cssStyle.height:", cssStyle.height);
inlineStyle.height = "300px";
inlineStyle.width = "300px";
console.log("inlineStyle.width:", inlineStyle.width);
console.log("inlineStyle.height:", inlineStyle.height);
</script>
</body>
</html>
<!---->
inlineStyle.width: 100px
inlineStyle.height: 100px
cssStyle.width:
cssStyle.height:
inlineStyle.width: 300px
inlineStyle.height: 300px
四、Element.getBoundingClientRect
- 返回元素的大小及其相对于视口的位置
- content-box，元素的尺寸等于width/height + padding + border-width
- border-box，元素的尺寸等于 width/height
- 不兼容 IE8 及其更早版本
- 只读
4.1 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>getBoundingClientRect</title>
<style>
#content-box {
width: 100px;
height: 100px;
border: 50px solid black;
padding: 50px;
margin: 50px;
background: blue;
box-sizing: content-box;
}
#border-box {
width: 100px;
height: 100px;
border: 50px solid black;
padding: 50px;
margin: 50px;
background: green;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="content-box"></div>
<div id="border-box"></div>
<script>
const content = document.getElementById("content-box");
const border = document.getElementById("border-box");
const contentRect = content.getBoundingClientRect();
const borderRect = border.getBoundingClientRect();
console.log("content-box-width:", contentRect.width);
console.log("content-box-height:", contentRect.height);
console.log("border-box-width:", borderRect.width);
console.log("border-box-height:", borderRect.height);
</script>
</body>
</html>
<!---->
content-box-width: 300
content-box-height: 300
border-box-width: 200
border-box-height: 200
参考链接