วิธีค้นหาความกว้างของ div โดยใช้ vanilla JavaScript

คุณจะค้นหาความกว้างปัจจุบันของ a <div>ในเบราว์เซอร์ที่ทำงานร่วมกันได้โดยไม่ต้องใช้ไลบรารี่อย่าง jQuery ได้อย่างไร?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

คุณสามารถใช้clientWidthหรือoffsetWidth การอ้างอิงเครือข่าย Mozilla Developer

มันจะเป็นเช่น:

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 ขอบบนซ้ายรัศมีและอื่น ๆ

คุณยังสามารถค้นหา DOM โดยใช้ ClassName ตัวอย่างเช่น:

document.getElementsByClassName("myDiv")

นี่จะส่งคืนอาร์เรย์ หากมีสถานที่ให้บริการหนึ่งที่คุณสนใจตัวอย่างเช่น:

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

divWidth ตอนนี้จะเท่ากับความกว้างขององค์ประกอบแรกในอาร์เรย์ div ของคุณ

document.getElementById("mydiv") ที่จริงแล้วคุณไม่จำเป็นต้องใช้
คุณสามารถใช้รหัสของ div เช่น:

var w = mydiv.clientWidth;
หรือ
var w = mydiv.offsetWidth;
อื่น ๆ

ตัวเลือกอื่นคือการใช้ฟังก์ชัน getBoundingClientRect โปรดทราบว่า getBoundingClientRect จะส่งกลับ rect ที่ว่างเปล่าหากการแสดงผลขององค์ประกอบคือ 'none'

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

วิธีการโทรด้านล่างใน div หรือ body tag onclick = "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ค่าความกว้างและความสูงได้เนื่องจากเบราว์เซอร์ไม่แสดงผลจนกว่าจะโหลดเต็ม