使用js解決由border屬性引起的div寬度問題
更新時間：2013年11月26日 16:50:42 作者：
由于border屬性引起的div寬度問題，確實很讓人頭疼，在本文將為大家介紹下使用JS是如何解決的，感興趣的朋友不要錯過
下面我們來看一個例程
<script type="text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//理論上應(yīng)該是寬度不斷減少，但是實際卻增長，原因在樣式表中的border屬性，去掉即可解決
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; }
</style>
</head>
<body>
<div id="ok"></div>
注意看注釋，為什么會出現(xiàn)這個現(xiàn)象呢？其實就是由于border引起的，由于ok.style.width指定的是div的寬度，而offsetwidth指的是實際的寬度，包括border寬度。所以這個右邊的式子得到的寬度值其實比左邊大一個像素，解決辦法，每次減去3個像素就可以達到實際減去一個像素的目的?；蛘哂糜疫呉灿胮arseInt(div.style.width),但要修改div如下：
<div id="ok" style="width:200px:></div>
終極方案：用currentstyle或getcomputedstyle來獲取屬性。
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var timer
function stopMove(){
clearInterval(timer)
}
function startMove(){
var div=document.getElementById('ok')
clearInterval(timer)
timer=setInterval(function(){
ok.style.width=ok.offsetWidth-1+'px' ;//理論上應(yīng)該是寬度不斷減少，但是實際卻增長，原因在樣式表中的border屬性，去掉即可解決
},20)
}
</script>
<style type="text/css">
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{width:800px;height: 200px;background-color:darkgreen;border: 1px red solid; }
</style>
</head>
<body>
<div id="ok"></div>
注意看注釋，為什么會出現(xiàn)這個現(xiàn)象呢？其實就是由于border引起的，由于ok.style.width指定的是div的寬度，而offsetwidth指的是實際的寬度，包括border寬度。所以這個右邊的式子得到的寬度值其實比左邊大一個像素，解決辦法，每次減去3個像素就可以達到實際減去一個像素的目的?；蛘哂糜疫呉灿胮arseInt(div.style.width),但要修改div如下：
復(fù)制代碼 代碼如下:
<div id="ok" style="width:200px:></div>
終極方案：用currentstyle或getcomputedstyle來獲取屬性。
您可能感興趣的文章:
- jquery和js實現(xiàn)對div的隱藏和顯示方法
- js使用removeChild方法動態(tài)刪除div元素
- js通過八個點 拖動改變div大小的實現(xiàn)方法
- JS控制一個DIV層在指定時間內(nèi)消失的方法
- js實現(xiàn)可拖動DIV的方法
- ajax局部刷新一個div下jsp內(nèi)容的方法
- js 為label標簽和div標簽賦值的方法
- Js制作簡單彈出層DIV在頁面居中 中間顯示遮罩的具體方法
- js innerHTML 改變div內(nèi)容的方法
- js固定DIV高度,超出部分自動添加滾動條的簡單方法
- js循環(huán)改變div顏色具體方法
- 解決用jquery load加載頁面到div時,不執(zhí)行頁面js的問題
- js解決彈窗問題實現(xiàn)班級跳轉(zhuǎn)DIV示例
- js防止DIV布局滾動時閃動的解決方法
相關(guān)文章
之前提到了JS中比較簡單的設(shè)計模式，在各種設(shè)計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談?wù)凧S中比較簡單的繼承方法2016-01-01
Javascript 兩種刷新方法以及區(qū)別和適用范圍
這篇文章主要介紹了Javascript 兩種刷新方法以及區(qū)別和適用范圍的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JavaScript中的冒泡排序法的知識，并通過一個例子給大家講解了js冒泡排序，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-08-08
JavaScript是一種腳本語言,是直接在瀏覽器運行的,下面這篇文章主要給大家介紹了50個超級有用的JavaScript單行代碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了js函數(shù)和this用法,結(jié)合實例形式分析了js函數(shù)和this基本功能、原理、使用方法與操作注意事項,需要的朋友可以參考下2020-03-03
WebRTC媒體權(quán)限申請getUserMedia實例詳解
這篇文章主要為大家介紹了WebRTC媒體權(quán)限申請getUserMedia實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了Bootstrap CDN和本地化環(huán)境搭建的方法，非常不錯具有參考借鑒價值，感興趣的朋友跟著小編一起學習吧2016-10-10
Nick Justice是GitHub開發(fā)者計劃的一員。早在ES6語言標準發(fā)布之前，他就借助像Babel這樣的轉(zhuǎn)譯器以及最新版本的瀏覽器在自己的項目中使用ES6特性。他認為，ES6的新特性將極大地改變JavaScript的編寫方式2016-03-03
這篇文章主要為大家介紹了JS利用中介模式開發(fā)全局控制器圖文示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
這篇文章主要為大家詳細介紹了js友好的時間返回函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08