ホームページ  >  記事  >  ウェブフロントエンド  >  onresize を使用して div を screen_javascript スキルのサイズに適応させるコード

onresize を使用して div を screen_javascript スキルのサイズに適応させるコード

WBOY
WBOYオリジナル
2016-05-16 18:36:201438ブラウズ

div を中央に配置する場合、一般に 2 つの方法があります。1 つは左右の幅を固定する方法、つまりピクセルの絶対位置を使用する方法で、もう 1 つは相対位置をパーセンテージで指定する方法です。 div は画面に適応し、パーセンテージを使用できます。ただし、ページ内にそのような文があると、新しい問題が発生します。

この文を言ったとき、すべてが正常でしたが、この標準ステートメントがなぜこのような不都合を引き起こしたのかわかりません
この問題に対応して、私は次の方法を使用して div の適応を実現しました
まず、私が使用した方法は、最初に左を設定する絶対位置です。 div の右、上、下のマージン。ボディに 2 つのイベントを追加します。

getwah() は画面のサイズを取得するために使用され、各マージンを div し、その差を計算します

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

var height,width,width_cha1,width_cha2;
関数 getwah()
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body.clientWidth;}
width=parseInt(d_width)
width_cha1=width-parseInt(document.getElementById("backi").style . left)
width_cha2=width-parseInt(document.getElementById("massage_box").style.left)
}

画面サイズが変更されたとき (サイズ変更時) に test() をトリガーしますこの機能は、画面と以前に取得したマージンの差に基づいてユーザーが div のマージンをリセットするためのもので、画面のサイズが変更されると、それに応じて div のマージンも変更されます。画面サイズの変更に応じて div を調整できます。
コードをコピー コードは次のとおりです:

関数 test()
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body .clientWidth;}
var now_left1=parseInt(d_width )-width_cha1;
var now_left2=parseInt(d_width )-width_cha2;
document.getElementById("backi") .style.left=now_left1
document.getElementById("massage_box").style.left=now_left2
}
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。