อ่านความกว้าง สูง ของ DOM ด้วย Javascript
การอ่านความกว้างและสูงของ element มีความแตกต่างกันในแต่ละ Browser ครับ ลองมาดูฟังก์ชั่นแต่ลพตัว ที่สามารถใช้ได้บน Browser ของคุณ
ดูผลลัพท์ของ Browser ที่คุณใช้ ในช่อง Browser ของคุณ นะครับ และลองเปลี่ยน Browser ดู
Safari 1.3 | Opera 7.54 | Opera 8 | Firefox 1.0.4 | Netscape 7.1 | IE 6 | Browser ของคุณ | Method |
---|---|---|---|---|---|---|---|
586px | 0px | 596px | 586px | 586px | undefined | document.defaultView.getComputedStyle(elementNode,"").getPropertyValue("width") | |
undefined | 0px | 596px | 586px | 586px | undefined | window.getComputedStyle(elementNode,"").getPropertyValue("width"); | |
undefined | undefined | undefined | undefined | undefined | auto | elementNode.currentStyle.width | |
0 | 0 | undefined | undefined | 0 | elementNode.style.pixelWidth | ||
596 | 596 | 596 | 596 | 596 | 596 | elementNode.offsetWidth | |
592 | 592 | 592 | 592 | 0 | 0 | elementNode.clientWidth | |
596 | 596 | 596 | 596 | 596 | 596 | elementNode.scrollWidth | |
Safari 1.3 | Opera 7.54 | Opera 8 | Firefox 1.0.4 | Netscape 7.1 | IE 6 | Browser ของคุณ | Method |
341 | 341 | 341 | 349 | 349 | 335 | getOffsetTop | |
349 | 349 | 349 | 349 | 349 | 343 | getOffsetTop + document.body.offsetTop | |
undefined | CSS1Compat | CSS1Compat | CSS1Compat | CSS1Compat | document.compatMode | ||
undefined | 3px | 3px | 3px | undefined | window.getComputedStyle(elementNode,"").getPropertyValue("padding-left"); | ||
undefined | undefined | undefined | undefined | 3px | elementNode.currentStyle.paddingLeft |
ตัวอย่าง