コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

js を使用して、border 属性_javascript スキルによって引き起こされる div 幅の問題を解決する

WBOY
リリース： 2016-05-16 17:12:22
オリジナル
1232 人が閲覧しました

ルーチンを見てみましょう。

コードをコピーします コードは次のとおりです。

< 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' ;//理論的には、幅は次のようになります。継続的に減少していますが、実際の増加はスタイル シートの border 属性によるもので、これを削除することで解決できます。
},20)
}
type="text/css"> ;
* {margin: 0;padding:0}
body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;}
#ok{幅:800ピクセル;高さ:200ピクセル;背景色:ダークグリーン;境界線:1ピクセル
>



この現象はなぜ起こるのでしょうか?実際、ok.style.width は div の幅を指定し、offsetwidth は境界線の幅を含む実際の幅を参照するため、境界線が原因で発生します。したがって、右側の式で得られる幅の値は、実際には左側の式よりも 1 ピクセル大きくなります。実際に 1 ピクセルを減算するという目的を達成するには、毎回 3 ピクセルを減算する必要があります。または、右側で parseInt(div.style.width) を使用しますが、div を次のように変更します:



コードをコピーします
コードは次のとおりです:
究極の解決策: currentstyle を使用します。または getcomputedstyle を使用して属性を取得します。
関連ラベル：
ボーダープロパティ
ソース：php.cn
前の記事：Google Dartプログラミング構文と基本型学習チュートリアル_基礎知識 次の記事：jQuery は、縮小可能および拡張可能なカスケード メニューの例を実装します code_javascript スキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
JSON ネスト配列プロパティ「project_id」と「project_name」を変更する方法 问题：[{"project_id":1,"project_name":"CDP","role":&q...
から 2024-04-06 15:39:51
0
1
466
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート