ลองดูกิจวัตรด้านล่าง
คัดลอกรหัสรหัสดังต่อไปนี้:
<script type="text/javascript">
var จับเวลา
ฟังก์ชั่น stopMove(){
clearInterval (ตัวจับเวลา)
-
ฟังก์ชั่น startMove(){
var div=document.getElementById('ตกลง')
clearInterval (ตัวจับเวลา)
จับเวลา = setInterval (ฟังก์ชั่น () {
ok.style.width=ok.offsetWidth-1+'px' ;//ตามทฤษฎีแล้วความกว้างควรจะลดลง แต่ในความเป็นจริงมันเพิ่มขึ้น เหตุผลก็คือแอตทริบิวต์เส้นขอบในสไตล์ชีต ซึ่งสามารถแก้ไขได้โดยการลบออก .
},20)
-
</สคริปต์>
<style type="text/css">
* {ระยะขอบ: 0; ช่องว่างภายใน: 0}
เนื้อความ {ขนาดตัวอักษร: 14px; ความสูงบรรทัด: 24px; ระยะขอบ: 0px; การขยาย: 0px;}
#ok{width:800px;height: 200px;สีพื้นหลัง:darkgreen;border: 1px ทึบสีแดง;
</สไตล์>
</หัว>
<ร่างกาย>
<div id="ตกลง"></div>
ให้ความสนใจกับความคิดเห็นว่าทำไมปรากฏการณ์นี้จึงเกิดขึ้น? ที่จริงแล้ว มีสาเหตุมาจากเส้นขอบ เนื่องจาก ok.style.width ระบุความกว้างของ div และ offsetwidth อ้างอิงถึงความกว้างจริง รวมถึงความกว้างของเส้นขอบด้วย ดังนั้น ค่าความกว้างที่ได้จากสูตรทางด้านขวาจะมีขนาดใหญ่กว่าค่าความกว้างทางซ้ายหนึ่งพิกเซล วิธีแก้ไขคือการลบ 3 พิกเซลในแต่ละครั้งเพื่อให้บรรลุจุดประสงค์ในการลบหนึ่งพิกเซลจริงๆ หรือใช้ parseInt(div.style.width) ทางด้านขวา แต่แก้ไข div ดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="ตกลง" style="width:200px:></div>
ทางออกที่ดีที่สุด: ใช้ currentstyle หรือ getcomputedstyle เพื่อรับคุณสมบัติ