ตั้งค่าความกว้างหรือความสูงขององค์ประกอบในโหมดมาตรฐาน


123

เป็นไปได้ไหมที่จะตั้งค่าความกว้างหรือความสูงขององค์ประกอบ HTML (เช่น<div>) ใน JavaScript ในโหมดมาตรฐาน

หมายเหตุรหัสต่อไปนี้:

<html>
<script language="javascript" type="text/javascript">
    function changeWidth(){
        var e1 = document.getElementById("e1");
        e1.style.width = 400;
    } 
</script>
<body>
    <input type="button" value="change width" onclick="changeWidth()"/>
    <div id="e1" style="width:20px;height:20px; background-color:#096"></div>
</body>
</html>

เมื่อผู้ใช้กดเปลี่ยนความกว้างปุ่มที่<div>'s กว้างควรเปลี่ยน

ทำงานได้ดีเมื่อการประกาศประเภทหลักกำหนดโหมด Quirks ในโหมดมาตรฐานฉันไม่สามารถเปลี่ยนขนาดขององค์ประกอบด้วยวิธีนี้

เป็นไปได้หรือไม่ที่จะปรับเปลี่ยนขนาดขององค์ประกอบในโหมดมาตรฐาน จะหลีกเลี่ยงความผิดปกตินี้ได้อย่างไร?

คำตอบ:


191

ลองประกาศหน่วยความกว้าง:

e1.style.width = "400px"; // width in PIXELS

1
อ่าฮะ .. ฉันหมายถึง "เหมียว" (c). ฉันใช้เวลาประมาณหนึ่งชั่วโมงในการพยายามหาสาเหตุว่าทำไมจึงไม่ใช้สไตล์ ขอบคุณ!
Vitalii Vasylenko

1
เป็นมูลค่าการกล่าวถึงความกว้างโดยไม่รวมระยะขอบและเมื่อใดbox-sizing: border-box;ที่ความกว้างจะรวมเส้นขอบความกว้างจะไม่รวมเส้นขอบ
Qian Chen

39

styleคุณสมบัติช่วยให้คุณสามารถระบุค่าสำหรับคุณสมบัติของ CSS

widthคุณสมบัติCSS ใช้ความยาวเป็นค่า

ความยาวต้องใช้หน่วย ในโหมดนิสัยใจคอเบราว์เซอร์มักจะถือว่าพิกเซลเป็นจำนวนเต็มแทนที่จะเป็นความยาว ระบุหน่วย

e1.style.width = "400px";
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.