ホームページ > 記事 > ウェブフロントエンド > JavaScript の offsetWidth に関するバグの問題と解決策
JavaScript の offsetWidth に関するバグの問題と解決策
- 黄舟オリジナル
- 2017-05-21 13:18:501401ブラウズ
この記事では、主に JavaScript の offsetWidth のバグと解決策を詳しく紹介します。興味のある方は、object
の Visible width の#p1 {
width: 100px;
height: 200px;
background: red;
}結果: 100#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
}結果: 104 (100 + 2 + 2)#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
padding: 20px;
}結果: 144 (100 + 2 + 2 + 20 + 20)#p1 {
width: 100px;
height: 200px;
background: red;
margin: 4px;
}結果: 100** つまり、
offsetWidth = width + padding + border、marginとは何の関係もありません。
**例を見てみましょう:
<!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 に境界線を追加したらどうなるでしょうか?<!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が狭くならないだけでなく、どんどん広くなっていきます…*
がループするとき、offsetWidth は 100 プラスになります。境界線の 2 を引いて 2 または 100 に移動するので、移動しないでください...* 解決策も非常に簡単です。気分を害する余裕がない場合は、隠す余裕はありません。 offsetWidth は必要ありません。
要素の行間スタイルを取得するには、element.style.width を直接使用できることは誰もが知っていますが、これは要素の行間スタイルにのみ適用され、CSS で記述されている場合はそれができません。
しかし、次の方法もあります:
- IE では、 element.
- current 非 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>以上がJavaScript の offsetWidth に関するバグの問題と解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。