得到html元素自身的寬度

時間 2020-07-10

標籤得到 html 元素自身寬度欄目 HTML 简体版

原文原文鏈接

想要控制html元素顯示的clip量.
最好是要知道html元素自身能有多麼大的寬度.javascript

接上一文章.
父nav截斷了子元素的顯示.
-
那麼使用鼠標能夠得到子元素的實際須要的寬度.
加載完畢以後,可使用js動態控制nav的寬度.:想要100%,120%,80%的寬度.html

用到javascript屬性.offsetWitdh
與此相似的還有,scrollWitdh,scrollLeft,clientWidth
參考連接:HTML精準定位java

獲取寬度
-
獲取鼠標位置.
使用onmouseover來監測.
使用到的javascript關鍵詞:eventX,eventY,offsetX,offsetY
使用相對於容器座標.則須要offset.dom

進一步 可使用設置scrollLeft修改滾動位置.測試

附(本文章功用測試源代碼):.net

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。