คุณสมบัติ HTML DOM clientWidth

คุณสมบัติ HTML DOM clientWidth ใช้สำหรับดึงความกว้างที่มองเห็นได้ขององค์ประกอบ HTML ความกว้างนี้รวม padding แต่ไม่นำขอบ สคролลบาร์ และระยะห่าง (margin) เข้าไป จะคืนค่าความกว้างขององค์ประกอบเท่านั้น แม้เนื้อหาจะล้นออกมาจากองค์ประกอบก็ตาม

ไวยากรณ์

ไวยากรณ์สำหรับคุณสมบัติ clientWidth ดังนี้ -

element.clientWidth

ตัวอย่าง

ลองดูตัวอย่างสำหรับคุณสมบัติ HTML DOM clientWidth -

<!DOCTYPE html> <html> <head> <style> #divStyle { width: 200px; height: 200px; padding: 10px; margin: 15px; border: 5px solid blue; background-color: lightgreen; } </style> </head> <body> <p>คลิกปุ่มด้านล่างเพื่อดึงความกว้างของ div</p> <button onclick="getWidth()">GET WIDTH</button> <div id="divStyle"> <b>A sample div</b> </div> <p id="Sample"></p> <script> function getWidth() { var x = document.getElementById("divStyle"); var txt = "Width including padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้ -

เมื่อคลิก GET WIDTH -

ในตัวอย่างข้างต้น -

เราสร้าง div ที่มี id "styleDIV" และมีสไตล์ที่ใช้กับมันโดยใช้ id -

#divStyle { width: 200px; height: 200px; padding: 10px; margin: 15px; border: 5px solid blue; background-color: lightgreen; }

Div -

<div id="divStyle"> <b>A sample div</b> </div>

เราสร้างปุ่ม GET WIDTH ที่จะเรียกใช้เมธอด getWidth() เมื่อคลิก -

<button onclick="getWidth()">GET WIDTH</button>

ฟังก์ชัน getWidth() ดึงองค์ประกอบ <div> โดยใช้เมธอด getElementById() และกำหนดให้ตัวแปร x จากนั้นใช้คุณสมบัติ clientWidth บน <div> เราได้ความกว้างของมันและหลังจากผนวกข้อความบางส่วนกำหนดให้ตัวแปร txt ข้อความภายใน txt จึงถูกแสดงภายในย่อหน้าโดยใช้คุณสมบัติ innerHTML บนย่อหน้าและกำหนดตัวแปร txt ให้กับมัน -

function getWidth() { var x = document.getElementById("divStyle"); var txt = "Width including padding: " + x.clientWidth + "px"; document.getElementById("Sample").innerHTML = txt; }