盒子模型
盒子模型:通过js中提供的一系列属性和方法,获取页面中元素的样式信息值(不指是css样式,是渲染出来的样式)
容器的高度:
现在有一个p标签,
1) 如果我们没有给这个p设定高度,里面的文字也会自行撑开一个高度,这时候容器的高度也就是内容的高度
2) 如果我们设定了p的高度,那么容器的高度就是设定的高度.
换言之,一旦设定高度,容器的高度就和内容高度没有半毛钱关系.同样,内容的高度取决于内容,跟容器的高度也是没有关系的.
注意的是,行内元素没有高度
容器的宽度:
现在有一个p标签,
1) 如果我们没有给这个p设定宽度,因为p是块级标签,默认宽度是浏览器窗口的宽度(有边框的话,减去边框),如果是inline-block则是内容自适应的宽度
2) 如果我们设定了p的宽度,那么容器的宽度就是设定的宽度.
换言之,一旦设定高度,容器的宽度就和内容宽度没有半毛钱关系.同样,内容的宽度取决于内容,跟容器的宽度度也是没有关系的.
注意的是,行内元素没有容器宽度
稍微综合下容器的宽度和容器的高度
1) 对于块级标签,设定宽高的话,就是设定值,没有设定的话,高度是内容的高度,但是宽度默认是浏览器窗口的宽度(有边框的话,减去边框)
2) 对于行内块,设定宽高的话,就是设定值.没有设定的话,均是内容的宽高度
3) 对于行内标签,容器的宽高都是0,和有没有设定无关,因为容器的宽高首先是一个容器,行内元素构不成容器
1.client系列
clientHeight/clientWidth/clientTop/clientLeft
clientHeight/clientWidth:容器的宽高+padding(top/bottom)
<p id="para"> The Layout is what determines what the size of the viewport is, which provides context for CSS styles that are dependent on it, e.g. percentage or viewport units. The viewport size is determined by the meta viewport tag provided in the document head or, if no tag is provided, the default viewport width of 980px is used. For example, the most common meta viewport value is to set the viewport size to correspond to the device width - HTML If the user visits the webpage on a device with a width of, for example, 1000px, then sizes will be based on that unit. Half the viewport will be 500px, 10vw will be 100px, and so on. </p> <p id="paraWidth"> tt </p> <span id="short"> rr </span> <script> var para = document.getElementById("para"); // clientHeight的值 console.log(para.clientHeight); // 这里注意,随着浏览器窗口的宽度不同,值也会不一样,因为是自适应的内容高度 para.style.height = "50px"; console.log(para.clientHeight); // 一旦设定高度,就是这个设定值,50 para.style.paddingTop = "20px"; console.log(para.clientHeight); // 有padding的话会加上,70 console.log(para.clientTop) // 0 para.style.border = "2px solid #333"; console.log(para.clientTop) // 2 // clientWidth的值 var paraWidth = document.getElementById("paraWidth"); console.log(paraWidth.clientWidth); // 浏览器窗口宽度 paraWidth.style.width = "100px"; console.log(paraWidth.clientWidth);// 100 // 行内元素 var short = document.getElementById("short"); console.log(short.clientWidth); // 0 console.log(short.clientWidth); // 0 console.log(short.clientHeight); // 0 // 行内块 short.style.display = "inline-block"; console.log(short.clientWidth); // 内容自适应的宽度 console.log(short.clientHeight); // 内容自适应的高度 short.style.width = "100px"; short.style.height = "200px"; console.log(short.clientWidth); // 100 console.log(short.clientHeight); // 200 </script> </body>
2.offset系列
offsetWidth/offsetHeight = clientWidth/clientHeight + 边框 = clientWidth/clientHeight + clientTop/clientLeft
offsetParent 当前元素的父级参照物,向上找最近的有定位的元素,没有的话就是body
offsetLeft/offsetTop 当前元素的外边框距离父级参照物的内边框的偏移量
<body>
<div id="box">
<p id="para">
The Layout is what determines what the size of the viewport is, which provides context for CSS styles that are dependent on it, e.g. percentage or viewport units. The viewport size is determined by the meta viewport tag provided in the document head or, if no tag is provided, the default viewport width of 980px is used. For example, the most common meta viewport value is to set the viewport size to correspond to the device width - HTML If the user visits the webpage on a device with a width of, for example, 1000px, then sizes will be based on that unit. Half the viewport will be 500px, 10vw will be 100px, and so on.
</p>
<p id="paraWidth">
tt
</p>
</div>
<script>
var para = document.getElementById("para");
var box = document.getElementById("box");
console.log(para.offsetParent) // body
box.style.position = "relative";
console.log(para.offsetParent) // box
box.style.position = "fixed";
console.log(para.offsetParent) // box
box.style.position = "absolute";
console.log(para.offsetParent) // box
</script>
</body>
3.scroll系列
scrollHeight = 容器的高度>内容的高度?容器的高度:内容的高度,也就是取较大值,scrollWidth亦如此
scrollLeft/scrollTop :这个容器的滚动条卷去的宽度和高度
4.关于操作浏览器本身的盒子模型信息
document.documentElment.clientWidth/clientHeight 当前浏览器的可视窗口的宽度和高度(就是一屏幕)
document.documentElment.scrollWidth/scrollHeight 若内容在一屏幕之内,等于clientWidth/clientHeight,若内容超出一屏幕,就是内容的宽度和高度(始终是取较大值)
document.body.scrollTop/scrollLeft 当前浏览器卷去的宽高(若内容在一屏幕之内的话,显然是0)
考虑到兼容, 需要写两套
必须document.documentElement.clientWidth || document.body.clientWidth
function win(attr, value) {
// 只有第一个参数,表示读取值 if (typeof value === "undefined") { return document.documentElement[attr] || document.body[attr]; }
// 有第二个参数,表示设置值 document.documentElement[attr] = value; document.body[attr] = value; }
5.这三个系列,clientWidth/clientHeight/offsetWidth/offsetHeight/scrollWidth/scrollHeight 均包括padding的值,offset在client上加一个边框,scroll取内容和client的较大值
clientTop/clientLeft(边框) offsetLeft/offsetTop(在offsetParent中的偏移量) scrollLeft/scrollTop(容器滚动条滚去的宽高)
只有scrollLeft/scrollTop可以修改值,其他均是只读
浏览器在获取结果的时候,这些值都是四舍五入的整数,返回的结果没有单位
