使用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 通過系統(tǒng)時間限定動態(tài)添加 select option的實例代碼
這篇文章主要介紹了JS 通過系統(tǒng)時間限定 動態(tài)添加 select option的實例代碼，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-06-06
JavaScript基于ChatGPT實現(xiàn)打字機消息回復(fù)
ChatGPT 是一個基于深度學(xué)習(xí)的大型語言模型，處理自然語言需要大量的計算資源和時間，響應(yīng)速度肯定比普通的讀數(shù)據(jù)庫要慢的多，本文介紹了ChatGPT打字機消息回復(fù)實現(xiàn)原理，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)2023-05-05
javascript制作sql轉(zhuǎn)換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉(zhuǎn)換為stringBuffer的小工具，使用方法很簡單，吧寫好的sql語句只要格式化好之后放進去就可以了，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
一說到prototype很多人可能第一個想到的是著名的prototype.js框架，當然我們今天說的不是它，而是Javascript中的prototype屬性，一般都被翻譯為“原型”。這是一個比較特殊的屬性，Javascript中的繼承一般都依賴這屬性實現(xiàn)。2010-08-08
一文詳解JS中的Map、Set、WeakMap和WeakSet
在JavaScript中，Map、Set、WeakMap和WeakSet是四個不同的數(shù)據(jù)結(jié)構(gòu)，它們都有不同的特點和用途，本文詳細介紹了Map、Set、WeakMap和WeakSet的用法及區(qū)別，需要的朋友可以參考下2023-04-04
JavaScript深度復(fù)制（deep clone）的實現(xiàn)方法
本文給大家介紹JavaScript深度復(fù)制（deep clone）的實現(xiàn)方法，涉及到j(luò)s深度復(fù)制相關(guān)知識，本文介紹的非常詳細，特此分享腳本之家平臺供大家參考2016-02-02
當前世界上有很多種瀏覽器，除了我們熟知的IE, Firefox, Opera, Safari四大瀏覽器之外，世界上還有近百種瀏覽器，有時候我們需要判斷瀏覽器與版本方便后續(xù)的操作，一句話瀏覽器的兼容性太差了，缺少標準2014-05-05
js this函數(shù)調(diào)用無需再次抓獲id，name或標簽名
this就是你當前要執(zhí)行的js所抓獲的節(jié)點，這樣在js里就可以不用document.getElement之類的寫法來抓獲id，name或標簽名，具體示例如下2014-03-03
這篇文章主要為大家詳細介紹了微信小程序日期時分組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了js對象屬性名駝峰式轉(zhuǎn)下劃線的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09