jquery menetapkan saiz kotak

Dalam pembangunan web bahagian hadapan, reka bentuk reka letak halaman adalah tugas yang sangat penting. Antaranya, kotak adalah asas susun atur halaman, dan saiz serta gayanya adalah penting untuk kesan keseluruhan dan pengalaman pengguna halaman. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan saiz kotak untuk mencapai kesan penyesuaian dan saiz tetap.

1. jQuery mendapat saiz kotak

Sebelum menetapkan saiz kotak, anda perlu mendapatkan saiz kotak terlebih dahulu. jQuery menyediakan pelbagai kaedah untuk mendapatkan saiz kotak, termasuk lebar(), tinggi(), outerWidth(), outerHeight(), innerWidth(), innerHeight(), dsb.

1. kaedah lebar() dan tinggi()

kaedah lebar() dan tinggi() digunakan untuk mendapatkan lebar dan tinggi elemen masing-masing. Kedua-dua kaedah ini mengembalikan lebar dan ketinggian kawasan kandungan elemen, tidak termasuk pelapik, jidar dan jidar.

Kod sampel:

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

2. kaedah outerWidth() dan outerHeight()

kaedah outerWidth() dan outerHeight() digunakan untuk mendapatkan elemen masing-masing lebar luar dan tinggi luar. Kedua-dua kaedah ini mengembalikan jumlah lebar dan ketinggian kawasan kandungan elemen serta pelapik, jidar dan jidar.

Kod sampel:

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

3. kaedah innerWidth() dan innerHeight()

kaedah innerWidth() dan innerHeight() digunakan untuk mendapatkan elemen masing-masing lebar dalam dan tinggi dalam. Kedua-dua kaedah ini mengembalikan jumlah lebar dan ketinggian kawasan kandungan elemen serta pelapik, tidak termasuk jidar dan jidar.

Kod sampel:

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

2. Tetapkan saiz kotak dengan jQuery

Selepas mendapat saiz kotak, anda boleh menggunakan jQuery untuk menetapkan saiz kotak secara dinamik. jQuery menyediakan pelbagai kaedah untuk menetapkan saiz kotak, termasuk lebar(), tinggi(), outerWidth(), outerHeight(), innerWidth(), innerHeight(), dsb. Kaedah

1. kaedah lebar() dan tinggi()

kaedah lebar() dan tinggi() digunakan untuk menetapkan lebar dan tinggi elemen masing-masing. Kedua-dua kaedah menerima parameter berangka yang menentukan lebar dan ketinggian elemen. Anda juga boleh menggunakan peratusan sebagai parameter untuk mencapai kesan penyesuaian.

Kod sampel:

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

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

2. kaedah outerWidth() dan outerHeight()

kaedah outerWidth() dan outerHeight() digunakan untuk menetapkan elemen masing-masing lebar luar dan tinggi luar. Kedua-dua kaedah ini menerima parameter Boolean untuk menentukan sama ada untuk memasukkan pelapik, jidar dan jidar. Anda juga boleh menggunakan peratusan sebagai parameter untuk mencapai kesan penyesuaian.

Kod sampel:

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

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

3. kaedah innerWidth() dan innerHeight()

kaedah innerWidth() dan innerHeight() digunakan untuk menetapkan elemen masing-masing lebar dalam dan tinggi dalam. Kedua-dua kaedah menerima parameter berangka yang menentukan lebar dalaman dan ketinggian elemen. Anda juga boleh menggunakan peratusan sebagai parameter untuk mencapai kesan penyesuaian.

Kod sampel:

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

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

3. Pelaksanaan saiz penyesuaian dan tetap

Dalam pembangunan sebenar, reka letak halaman yang berbeza memerlukan tetapan saiz kotak yang berbeza. Secara umumnya, saiz penyesuaian sesuai untuk susun atur responsif, manakala saiz tetap sesuai untuk susun atur statik. Yang berikut menerangkan cara menggunakan jQuery untuk mencapai kesan penyesuaian dan saiz tetap.

1. Pelaksanaan saiz penyesuaian

Saiz penyesuaian biasanya menggunakan peratusan sebagai parameter untuk melaksanakan reka letak responsif berdasarkan saiz tetingkap penyemak imbas.

Kod sampel:

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

Dalam kod di atas, gaya css digunakan untuk menetapkan saiz kotak, dan kaedah innerWidth() dan innerHeight() digunakan dalam jQuery untuk mencapai saiz penyesuaian. Apabila saiz tetingkap pelayar berubah, jQuery akan mengesan perubahan dalam saiz tetingkap dan mengira semula saiz kotak.

2. Pelaksanaan saiz tetap

Saiz tetap biasanya menggunakan nilai piksel sebagai parameter untuk melaksanakan reka letak statik berdasarkan draf reka bentuk.

Kod sampel:

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

Dalam kod di atas, gaya CSS digunakan untuk menetapkan saiz kotak, dan kaedah width() dan height() digunakan dalam jQuery untuk mencapai saiz tetap. Dalam acara sedia jQuery, tetapkan saiz kotak kepada 200px×100px.

Ringkasnya, artikel ini memperkenalkan cara menggunakan jQuery untuk menetapkan saiz kotak, termasuk mendapatkan saiz kotak dan menetapkan saiz kotak, dan cara mencapai kesan saiz penyesuaian dan tetap. Saya harap artikel ini akan membantu kepada pemula dalam pembangunan web bahagian hadapan.

Atas ialah kandungan terperinci jquery menetapkan saiz kotak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!