バニラJavaScriptを使用してdivの幅を見つける方法は？

jQueryのようなライブラリを使用せずに、<div>ブラウザーの互換性のある方法でaの現在の幅をどのようにして見つけますか？

document.getElementById("mydiv").offsetWidth

• element.offsetWidth（MDC）

clientWidthまたはMozilla開発者ネットワーク参照を使用できますoffsetWidth

それは次のようになります：

document.getElementById("yourDiv").clientWidth; // returns number, like 728

またはボーダー幅：

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

すべての答えは正しいですが、私はまだ機能する可能性のある他のいくつかの選択肢を提供したいと思います。

割り当てられた幅（パディング、マージンなどは無視）を探している場合は、これを使用できます。

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyleを使用すると、その要素のすべてのスタイルにアクセスできます。例：padding、paddingLeft、margin、border-top-left-radiusなど。

ClassNameを使用してDOMを検索することもできます。例えば：

document.getElementsByClassName("myDiv")

これは配列を返します。興味のある特定のプロパティがある場合。例：

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth これで、div配列の最初の要素の幅と等しくなります。

実際、を使用する必要はありませんdocument.getElementById("mydiv") 。
あなたは、単にのように、div要素のIDを使用することができます

var w = mydiv.clientWidth;
か
var w = mydiv.offsetWidth;
など

別のオプションは、getBoundingClientRect関数を使用することです。要素の表示が「none」の場合、getBoundingClientRectは空のrectを返すことに注意してください。

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

divまたはbodyタグのonclick = "show（event）;"の以下のメソッドを呼び出します function show（event）{

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

計算されたスタイルを取得する正しい方法は、ページがレンダリングされるまで待機しています。これは次の方法で実行できます。auto値を取得する際のタイムアウトに注意してください。

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

ちょうど使用する場合

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

autoフルロードが実行されるまでブラウザはレンダリングしないため、幅と高さの値を取得できます。