jquery définit la taille de la boîte

Dans le développement Web front-end, la conception de la mise en page est une tâche très importante. Parmi eux, la boîte constitue la base de la mise en page, et sa taille et son style sont cruciaux pour l’effet global et l’expérience utilisateur de la page. Cet article explique comment utiliser jQuery pour définir la taille de la boîte afin d'obtenir des effets adaptatifs et de taille fixe.

1. jQuery obtient la taille de la boîte

Avant de définir la taille de la boîte, vous devez d'abord obtenir la taille de la boîte. jQuery fournit plusieurs méthodes pour obtenir la taille de la boîte, notamment width(), height(), externalWidth(), externalHeight(), innerWidth(), innerHeight(), etc.

1. Méthodes width() et height()

Les méthodes width() et height() sont utilisées pour obtenir la largeur et la hauteur de l'élément respectivement. Ces deux méthodes renvoient la largeur et la hauteur de la zone de contenu de l'élément, à l'exclusion du remplissage, de la bordure et de la marge.

Exemple de code :

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

2. outerWidth() et externalHeight() méthodes

outerWidth() et externalHeight( ) les méthodes sont utilisées pour obtenir respectivement la largeur extérieure et la hauteur extérieure de l'élément. Ces deux méthodes renvoient la largeur et la hauteur totales de la zone de contenu de l'élément ainsi que le remplissage, la bordure et la marge.

Exemple de code :

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

3. innerWidth() et innerHeight() méthodes

innerWidth() et innerHeight( ) les méthodes sont utilisées pour obtenir respectivement la largeur intérieure et la hauteur intérieure de l'élément. Ces deux méthodes renvoient la largeur et la hauteur totales de la zone de contenu de l'élément plus le remplissage, à l'exclusion des bordures et des marges.

Exemple de code :

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

2. jQuery définit la taille de la boîte

Après avoir obtenu la taille de la boîte, vous pouvez utiliser jQuery pour définir dynamiquement la boîte taille. jQuery fournit une variété de méthodes pour définir la taille de la boîte, notamment width(), height(), externalWidth(), externalHeight(), innerWidth(), innerHeight(), etc.

1. Les méthodes width() et height()

les méthodes width() et height() sont utilisées pour définir la largeur et la hauteur des éléments respectivement. Les deux méthodes acceptent un paramètre numérique qui spécifie la largeur et la hauteur de l'élément. Vous pouvez également utiliser des pourcentages comme paramètres pour obtenir des effets adaptatifs.

Exemple de code :

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

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

2. outerWidth() et externalHeight() méthodes

outerWidth() et externalHeight( ) les méthodes sont utilisées pour définir respectivement la largeur extérieure et la hauteur extérieure de l'élément. Ces deux méthodes acceptent un paramètre booléen pour spécifier s'il faut inclure le remplissage, la bordure et la marge. Vous pouvez également utiliser des pourcentages comme paramètres pour obtenir des effets adaptatifs.

Exemple de code :

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

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

3. innerWidth() et innerHeight() méthodes

innerWidth() et innerHeight( ) les méthodes sont utilisées pour définir respectivement la largeur intérieure et la hauteur intérieure de l'élément. Les deux méthodes acceptent un paramètre numérique qui spécifie la largeur intérieure et la hauteur de l'élément. Vous pouvez également utiliser des pourcentages comme paramètres pour obtenir des effets adaptatifs.

Exemple de code :

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

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

3. Implémentation de tailles adaptatives et fixes

Dans le développement réel, différentes mises en page nécessitent des différences. Comment définir la boîte taille. De manière générale, les tailles adaptatives conviennent aux mises en page réactives, tandis que les tailles fixes conviennent aux mises en page statiques. Ce qui suit décrit comment utiliser jQuery pour obtenir des effets adaptatifs et de taille fixe.

1. Implémentation de la taille adaptative

La taille adaptative utilise généralement des pourcentages comme paramètres pour implémenter une mise en page réactive en fonction de la taille de la fenêtre du navigateur.

Exemple de code :

<!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>

Dans le code ci-dessus, le style CSS est utilisé pour définir la taille de la boîte, et les méthodes innerWidth() et innerHeight() sont utilisées dans jQuery pour implémenter l'auto- Adaptation à la taille. Lorsque la taille de la fenêtre du navigateur change, jQuery détectera le changement de taille de la fenêtre et recalculera la taille de la boîte.

2. Implémentation de taille fixe

La taille fixe utilise généralement les valeurs de pixels comme paramètres pour implémenter une disposition statique basée sur les brouillons de conception.

Exemple de code :

<!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>

Dans le code ci-dessus, le style CSS est utilisé pour définir la taille de la boîte, et les méthodes width() et height() sont utilisées dans jQuery pour atteindre une taille fixe. Dans l'événement ready de jQuery, définissez la taille de la boîte sur 200px×100px.

Pour résumer, cet article présente comment utiliser jQuery pour définir la taille de la boîte, y compris obtenir la taille de la boîte et définir la taille de la boîte, et comment obtenir des effets de taille adaptatifs et fixes. J'espère que cet article sera utile aux débutants en développement Web front-end.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!