ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript で要素を中央に配置する方法

JavaScript で要素を中央に配置する方法

藏色散人
藏色散人オリジナル
2021-06-27 11:17:333136ブラウズ

JavaScript で要素を中央揃えに設定する方法: 最初にフロントエンド サンプル ファイルを作成し、次に指定された要素の位置属性値を絶対値に設定し、最後に「οnlοad="center();" を追加します」 「体に。

JavaScript で要素を中央に配置する方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript で要素を中央に配置するにはどうすればよいですか?

要素のセンタリングを制御する Javascript メソッド

たとえば、ID が div1 の要素のセンタリングを制御する場合は、まず、position 属性値を次のように設定します。要素を絶対値に設定し、οnlοad="center();"

Code:

function center() {   
    var divId=document.getElementById('div1');   
    divId.style.left=(document.documentElement.clientWidth-divId.clientWidth)/2+'px';   
    divId.style.top=(document.documentElement.clientHeight-divId.clientHeight)/2+'px';   
}

を追加すると、w3c 仕様に準拠していれば、div を中央に配置できます。 IEとFirefoxの両方でテスト済み。単位 (「px」) を削除すると、Firefox で気絶してしまいます (笑)~~

[推奨学習: JavaScript 上級チュートリアル ]

以上がJavaScript で要素を中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。