WebKitの幅が更新されていませんか?
-
10-07-2019 - |
質問
ウィンドウのサイズ変更で実行されるコードがあります。入力テキスト要素の width
と outerWidth
を取得しています。
このプロセスは、 outerWidth
から適切な結果を返すが、 width
読み込み時のオリジナルから変更しない。
これは、ブラウザウィンドウのサイズを変更したときのスクリプトからの実際のコンソール出力です(これはChromeですが、Safari 4でも同じことが起こります):
outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772
これを経験した人はいますか?なぜそれが起こるのか知っていますか?そして最も重要なことは、それを回避する方法を知っていますか? :)
ありがとう。
解決
これが私のテストケースです。どちらも期待どおりに動作するようです(Safari 4)。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
input {
width: 50%;
height: 2em;
font-size: 1em;
}
</style>
</head>
<body>
<p>
<input type="text" id="w" />
</p>
<p>
<input type="text" id="ow" />
</p>
<script type="text/javascript">
function init(){
$('#w').val($('#w').width());
$('#ow').val($('#ow').outerWidth());
}
$(function(){
init();
$(window).resize(function(){
init();
});
});
</script>
</body>
</html>
所属していません StackOverflow