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