<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
box-sizing:content-box;
width:980px;
padding: 10px;
border:1px solid red;
}
</style>
</head>
<body>
</body>
<script>
function log(arg){
console.log(arg);
}
log(document.body.clientWidth);//1000
log(document.body.clientHeight);//20
log(document.documentElement.clientWidth);//1280
log(document.documentElement.clientHeight);//393
</script>
</html>
在chrome和firefox下测试得到的都是那个结果,我想问的是为什么计算的时候没有包括border?
谁能给讲讲document.body.clientWidthdocument.documentElement.clientWidth的区别吗?万分感谢!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有的话)、边框和外边距。详情
document.documentElement取得的是html元素,也就是viewport(视口);
视口的尺寸通过
document. documentElement. clientWidth/Height取得;有关于浏览器视口的详细讲解移步这里