jqueryはボックスのサイズを設定します-フロントエンドQ&A-php.cn

jqueryはボックスのサイズを設定します

PHPz

リリース： 2023-05-28 09:26:08

オリジナル

1177 人が閲覧しました

フロントエンド Web 開発では、ページレイアウトの設計は非常に重要なタスクです。その中でも、ボックスはページレイアウトの基礎であり、そのサイズとスタイルはページの全体的な効果とユーザーエクスペリエンスにとって重要です。この記事では、jQuery を使用してボックスサイズを設定し、適応型および固定サイズの効果を実現する方法を紹介します。

1. jQuery はボックスサイズを取得します

ボックスサイズを設定する前に、まずボックスサイズを取得する必要があります。 jQuery には、width()、height()、outerWidth()、outerHeight()、innerWidth()、innerHeight() など、ボックスのサイズを取得するための複数のメソッドが用意されています。

width() メソッドと height() メソッド

width() メソッドと height() メソッドは、要素の幅と高さをそれぞれ取得するために使用されます。これら 2 つのメソッドは、パディング、ボーダー、マージンを除いた、要素のコンテンツ領域の幅と高さを返します。

サンプルコード:

$(document).ready(function() {
  var boxWidth = $('#box').width();
  var boxHeight = $('#box').height();
  console.log('boxWidth:' + boxWidth + ', boxHeight:' + boxHeight);
});

ログイン後にコピー

outerWidth() メソッドとouterHeight() メソッド

outerWidth() メソッドとouterHeight() メソッドを使用して要素を取得します。それぞれ外側の幅と外側の高さです。これら 2 つのメソッドは、要素のコンテンツ領域にパディング、ボーダー、マージンを加えた幅と高さの合計を返します。

サンプルコード:

$(document).ready(function() {
  var boxOuterWidth = $('#box').outerWidth();
  var boxOuterHeight = $('#box').outerHeight();
  console.log('boxOuterWidth:' + boxOuterWidth + ', boxOuterHeight:' + boxOuterHeight);
});

ログイン後にコピー

innerWidth() および innerHeight() メソッド

innerWidth() および innerHeight() メソッドは要素を取得するために使用されます。それぞれ内側の幅と内側の高さです。これら 2 つのメソッドは、ボーダーとマージンを除いた、要素のコンテンツ領域とパディングの合計の幅と高さを返します。

サンプルコード:

$(document).ready(function() {
  var boxInnerWidth = $('#box').innerWidth();
  var boxInnerHeight = $('#box').innerHeight();
  console.log('boxInnerWidth:' + boxInnerWidth + ', boxInnerHeight:' + boxInnerHeight);
});

ログイン後にコピー

2. jQuery でボックスサイズを設定する

ボックスサイズを取得した後、jQuery を使用してボックスサイズを動的に設定できます。 jQuery には、width()、height()、outerWidth()、outerHeight()、innerWidth()、innerHeight() など、ボックスサイズを設定するためのさまざまなメソッドが用意されています。

width() メソッドと height() メソッド

width() メソッドと height() メソッドは、要素の幅と高さをそれぞれ設定するために使用されます。どちらのメソッドも、要素の幅と高さを指定する数値パラメータを受け入れます。パーセンテージをパラメータとして使用して、適応効果を実現することもできます。

サンプルコード:

$(document).ready(function() {
  // 设置固定宽度和高度
  $('#box').width(200).height(100);

  // 设置自适应宽度和高度
  $('#box').width('50%').height('50%');
});

ログイン後にコピー

outerWidth() メソッドとouterHeight() メソッド

outerWidth() メソッドとouterHeight() メソッドは要素の設定に使用されます。それぞれ外側の幅と外側の高さです。これら 2 つのメソッドは、パディング、境界線、およびマージンを含めるかどうかを指定するブール値パラメーターを受け取ります。パーセンテージをパラメータとして使用して、適応効果を実現することもできます。

サンプルコード:

$(document).ready(function() {
  // 设置固定外宽度和外高度
  $('#box').outerWidth(300, true).outerHeight(150, true);

  // 设置自适应外宽度和外高度
  $('#box').outerWidth('50%', true).outerHeight('50%', true);
});

ログイン後にコピー

innerWidth() メソッドと innerHeight() メソッド

innerWidth() メソッドと innerHeight() メソッドを使用して要素を設定しますそれぞれ内側の幅と内側の高さです。どちらのメソッドも、要素の内側の幅と高さを指定する数値パラメーターを受け入れます。パーセンテージをパラメータとして使用して、適応効果を実現することもできます。

サンプルコード:

$(document).ready(function() {
  // 设置固定内宽度和内高度
  $('#box').innerWidth(260).innerHeight(110);

  // 设置自适应内宽度和内高度
  $('#box').innerWidth('50%').innerHeight('50%');
});

ログイン後にコピー

3. 適応サイズと固定サイズの実装

実際の開発では、ページレイアウトが異なれば、ボックスサイズの設定方法も異なります。一般に、アダプティブサイズはレスポンシブレイアウトに適しており、固定サイズは静的レイアウトに適しています。以下では、jQuery を使用して適応型および固定サイズの効果を実現する方法について説明します。

アダプティブサイズの実装

アダプティブサイズでは、通常、ブラウザウィンドウサイズに基づいて応答性の高いレイアウトを実装するためのパラメータとしてパーセンテージが使用されます。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>自适应大小的实现</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #box {
      background-color: #ccc;
      width: 50%;
      height: 50%;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(window).resize(function() {
        $('#box').innerWidth('50%').innerHeight('50%');
      });
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、CSS スタイルを使用してボックスのサイズを設定し、jQuery で innerWidth() メソッドと innerHeight() メソッドを使用して次のことを実現します。適応サイズ。ブラウザーのウィンドウサイズが変更されると、jQuery はウィンドウサイズの変更を検出し、ボックスのサイズを再計算します。

固定サイズの実装

固定サイズでは、通常、ピクセル値をパラメータとして使用し、デザインドラフトに基づいて静的レイアウトを実装します。

サンプルコード:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>固定大小的实现</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #box {
      background-color: #ccc;
      width: 300px;
      height: 150px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#box').width(200).height(100);
    });
  </script>
</body>
</html>

ログイン後にコピー

上記のコードでは、CSS スタイルを使用してボックスのサイズを設定し、jQuery で width() メソッドと height() メソッドを使用して、固定サイズ。 jQueryのreadyイベントでボックスのサイズを200px×100pxに設定します。

要約すると、この記事では、jQuery を使用してボックスサイズを設定する方法 (ボックスサイズの取得とボックスサイズの設定を含む)、および適応サイズと固定サイズの効果を実現する方法を紹介します。この記事がフロントエンド Web 開発の初心者に役立つことを願っています。

以上がjqueryはボックスのサイズを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。