您現在的位置: 365建站網 > 365學習 > JS/javascript中offsetWidth的用法和bug及處理方法

JS/javascript中offsetWidth的用法和bug及處理方法

文章來源:365jz.com     點擊數:404    更新時間:2018-01-07 10:15   參與評論
offsetWidth是什么?

答:它可以獲取物體寬度的數值

HTML部分


<div id="div1"></div>

<style>
#div1 { width:200px; height:200px; border:1px solid red; padding:2px; margin:2px; background:green;}
</style>


請看上面的html,你知道div1的offsetWidth是多少嗎?

是不是200啊

哈哈,錯了

div1的offsetWidth是206

為什么?

答:offsetWidth實際獲取的是盒模型(width+border + padding)

200+2+4=206



擴展:那么offsetLeft和offsetTop呢

答: offsetLeft = left + marginLeft

     offsetTop = top +marginTop


示例:讓div變窄

現象:onmouSEOver時,div變窄


原理:

oDiv.style.width = oDiv.offsetWidth - 1 + "px";  

offsetWidth表示對象的可見寬度。
比如:



1
2
3
4
5
#p1 {
width: 100px;
height: 200px;
background: red;
}
結果:100



1
2
3
4
5
6
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
}
結果:104 (100 + 2 + 2)



1
2
3
4
5
6
7
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
padding: 20px;
}
結果:144 (100 + 2 + 2 + 20 + 20)



1
2
3
4
5
6
#p1 {
width: 100px;
height: 200px;
background: red;
margin: 4px;
}
結果:100

**

所以,offsetWidth = width + padding + border, 和margin無關。

**
下面來看一個例子:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/CSS">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
  }
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/JavaScript">
  var op = document.getElementById('p1');
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + 'px';
  }, 50);
</script>
</body>
</html>
現象:紅色p逐漸變窄,直到消失,沒問題!

如果給p加一個border,呢?



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
  var op = document.getElementById('p1');
  setInterval(function() {
   op.style.width = op.offsetWidth - 1 + 'px';
  }, 50);
</script>
</body>
</html>
現象:紅色p不僅沒有變窄,反而越來越寬…… 

*

原因也很簡單:就是border的直接原因,因為offsetWidth是把border算進去的,定時器輪詢的時候,第一次,width : 102 - 1 == 101 ,那么offsetWidth立馬就變為103;第二次,width: 103 - 1 == 102, 那么offsetWidth立馬就變為104;緊接著第三次,width: 104 - 1 == 103, offsetWidth就為104了……

倘若把 op.style.width = op.offsetWidth - 1 + ‘px'; 換成 -2,那么紅色p就不動了,不會變寬也不會變窄,因為offsetWidth為102,減去2就是100和原本的width相等,下一次循環,offsetWidth就等于100加上border的2,再減去2還是100,所以不動……*

解決方案也很簡單,惹不起還躲不起?不用offsetWidth了!

我們都知道,獲取元素的行間樣式直接用element.style.width即可,但是這只針對元素的行間樣式,如果寫在css中,你就獲取不到了.

但也是有辦法的:

IE中用element.currentStyle.width / element.currentStyle.[‘width'];

非IE中用getComputedStyle(element, false)[‘width']

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">

  var op = document.getElementById('p1');
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  alert(getStyle(op, 'width'));//直接彈出 “500px”
</script>
</body>
</html>

有了上面的這個封裝,我們就可以解決offsetWidth帶來的困擾了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
  #p1 {
   width: 500px;
   height: 200px;
   background: red;
   border: 1px solid black;
  }
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
  var op = document.getElementById('p1');
  function getStyle(obj, attr) {
   if (obj.currentStyle) {//IE
    return obj.currentStyle[attr];
   } else {
    return getComputedStyle(obj, false)[attr];
   }
  }
  setInterval(function() {
   //parseInt是因為getStyle()返回的是‘px'帶單位,要整數化
   op.style.width = parseInt(getStyle(op, 'width')) - 1 + 'px';
  }, 30);
</script>
</body>
</html>

如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (404人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 激动网色视频| 女人与公拘交的视频| 伊人久久大香线蕉av仙人| 欧韩日本一道在线| 真实女人偷人偷拍视频| chinese骚乱叫喷水videos| 农村大乱纶视频| 大黑大巴大战欧洲美女图片| chinese男同志movies| 伊人久久五月丁婷婷| 18禁无遮无拦很黄很黄的漫画| 日本免费最新高清不卡视频| 日本道色综合久久影院| zozozo另类人禽交| 新婚被老头播种怀孕| 国产真实露脸精彩对白| 欧美乱码伦视频免费| 偷偷要在线网页| 国产薄丝脚交视频在线观看| 国产亚洲人成网站在线观看| 美女视频黄频a美女大全| 两人做人爱费视频| 又黄又粗暴的gif动态图| 国产专区青青在线视频| 第一次处破女08俄罗斯123| 97影院理论午夜伦不卡| 亚洲中文av一区二区三区| 国产三级| 国产乱人伦av在线a| 亚洲大乳高潮日本专区| h无码精品动漫在线观看| http://www.qq1qq1.com