อ่านความกว้าง สูง ของ 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 |
ตัวอย่าง