取得html元素本身的宽度

2024年2月9日 201次阅读 来源: Songlairui

想要掌握html元素显现的clip量.
最好是要知道html元素本身能有多么大的宽度.

接上一文章.
父nav截断了子元素的显现.
–
那末运用鼠标能够获得子元素的实际须要的宽度.
加载终了以后,能够运用js动态掌握nav的宽度.:想要100%,120%,80%的宽度.

用到javascript属性.offsetWitdh
与此相似的另有,scrollWitdh,scrollLeft,clientWidth
参考链接:HTML精准定位

猎取宽度
–
猎取鼠标位置.
运用onmouseover来监测.
运用到的javascript关键词:eventX,eventY,offsetX,offsetY
运用相对于容器坐标.则须要offset.

进一步 能够运用设置scrollLeft修正转动位置.

附(本文章服从测试源代码):

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>javascript 猎取dom宽度</title>
    <style>
        #outer{width:10em;overflow: hidden;border:1px solid #e3e3e2;background: #f2f3f4;padding:.3em 0;}
        #inner{width:16em;padding:.3em;background: #fff;}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">ko</div>
    </div>
    <script>
        var inner=document.getElementById('inner');
        var outer=document.getElementById('outer');
        inner.innerHTML = inner.offsetWidth+" / "+outer.offsetWidth;
        outer.style.width = inner.offsetWidth*.8 + "px";
        inner.innerHTML = inner.innerHTML+" / "+outer.offsetWidth;
        inner.onmousemove=function(){
            inner.innerHTML=event.offsetX+"/"+event.clientX;
        }
    </script>
</body>
</html>
    原文作者：Songlairui
    原文地址: https://segmentfault.com/a/1190000002725353
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞