HTML组件自适应 javascript实现，多种多样融会贯通

小半 • 2023年1月12日下午2:09 • 技术随笔 • 阅读 211

网页可见区域宽：document.body.clientWidth;
网页可见区域高：document.body.clientHeight;

网页可见区域高：document.body.offsetWidth
(包括边线的宽);
网页可见区域高：document.body.offsetHeight
(包括边线的宽);
网页正文全文宽：document.body.scrollWidth;

网页正文全文高：document.body.scrollHeight;
网页被卷去的高：document.body.scrollTop;

网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;

网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;

屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度：window.screen.availHeight;

屏幕可用工作区宽度：window.screen.availWidth;

实例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="height:200px;width:200px;background-color:#000;position: absolute;"></div>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    window.onresize = function () {

        var box = document.getElementById("box");
        box.style.width = String(document.body.clientWidth/2)+"px";
    };
</script>
</body>
</html>

这边设置的是根据网页的宽度的二分之一设置组建的宽度