jquery mengubah ketinggian dan lebar div

Dalam reka bentuk web, selalunya perlu menggunakan jQuery untuk mengubah suai elemen pada halaman secara dinamik, seperti ketinggian dan lebar div. jQuery ialah perpustakaan JavaScript ringan yang merangkum kod JavaScript yang kompleks dan menyediakan kaedah yang mudah dan mudah digunakan untuk pembangun untuk mengendalikan model objek dokumen DOM dengan lebih mudah.

Mengubah suai ketinggian dan lebar div ialah salah satu operasi biasa dalam jQuery. Dalam artikel ini, kami akan memperkenalkan secara ringkas cara mengubah suai ketinggian dan lebar div menggunakan jQuery.

1. Ubah suai ketinggian dan lebar div melalui kaedah CSS

Kaedah CSS dalam jQuery boleh digunakan terus untuk mengubah suai sifat gaya CSS elemen. Untuk mengubah suai ketinggian dan lebar div, kita hanya perlu memanggil kaedah CSS dan memasukkan nilai atribut ketinggian dan lebar.

Sebagai contoh, kami mempunyai kod HTML berikut:

<div id="mydiv">Hello World</div>

Kami boleh mengubah suai ketinggian dan lebar div melalui kod berikut:

$("#mydiv").css("height", "200px");
$("#mydiv").css("width", "300px");

Kod di atas akan berubah ketinggian dan lebar elemen mydiv Ketinggian ditetapkan kepada 200 piksel dan lebar ditetapkan kepada 300 piksel. Kami juga boleh mengoptimumkan kod di atas dan mengubah suai kedua-dua sifat CSS bersama-sama, seperti yang ditunjukkan di bawah:

$("#mydiv").css({
  "height": "200px",
  "width": "300px"
});

Kaedah ini mudah dan mudah digunakan, tetapi ia secara dinamik akan menjana sejumlah besar gaya CSS, yang tidak kondusif untuk pengoptimuman prestasi.

2. Ubah suai ketinggian dan lebar div melalui kaedah ketinggian dan lebar

Cara lain untuk mengubah suai ketinggian dan lebar div ialah menggunakan ketinggian dan lebar dua kaedah ini Anda boleh menetapkan ketinggian dan lebar elemen secara langsung.

Sebagai contoh, kami terus menggunakan kod HTML sebelumnya:

<div id="mydiv">Hello World</div>

Kami boleh mengubah suai ketinggian dan lebar div melalui kod berikut:

$("#mydiv").height("200px");
$("#mydiv").width("300px");

Dua baris ini kod masing-masing akan menukar mydiv Ketinggian elemen ditetapkan kepada 200 piksel dan lebar ditetapkan kepada 300 piksel.

Berbanding dengan kaedah CSS, menggunakan kaedah ketinggian dan lebar adalah lebih mudah, lebih pantas dan lebih cekap.

3. Ubah suai ketinggian dan lebar div secara dinamik

Selain mengubah suai ketinggian dan lebar div secara statik, kami juga boleh menukarnya secara dinamik berdasarkan beberapa peristiwa .

Sebagai contoh, apabila saiz tetingkap berubah, tetapkan lebar elemen mydiv kepada separuh saiz tetingkap.

$(window).resize(function() {
  var w = $(window).width();
  $("#mydiv").width(w/2);
});

Kod di atas akan mendapat lebar w tetingkap semasa apabila saiz tetingkap berubah, dan kemudian tetapkan lebar elemen mydiv kepada separuh daripada w.

4. Gunakan kaedah CSS, ketinggian dan lebar dalam kombinasi

Dalam pembangunan sebenar, kita selalunya perlu mengubah suai berbilang atribut gaya CSS sesuatu elemen pada masa yang sama. Pada ketika ini, kita boleh menggunakan gabungan kaedah CSS, ketinggian dan lebar untuk menjadikan kod itu ringkas dan boleh dibaca.

Sebagai contoh, kami ingin menetapkan ketinggian elemen mydiv kepada 100 piksel, lebar kepada 200 piksel, warna latar belakang kepada merah dan warna fon kepada putih.

$("#mydiv").css({
  "background-color": "red",
  "color": "white"
}).height("100px").width("200px");

Kod di atas akan mengubah suai warna latar belakang, warna fon, ketinggian dan lebar elemen mydiv pada masa yang sama.

Ringkasan

Artikel ini memperkenalkan cara menggunakan jQuery untuk mengubah suai ketinggian dan lebar div. Kami boleh menggunakan kaedah CSS untuk mengubah suai secara langsung sifat gaya CSS, menggunakan kaedah ketinggian dan lebar untuk mengubah suai ketinggian dan lebar secara langsung, atau kami boleh menukarnya secara dinamik berdasarkan peristiwa. Akhir sekali, kita juga boleh menggunakan gabungan kaedah CSS, ketinggian dan lebar untuk mengubah suai berbilang sifat gaya CSS pada masa yang sama.

Tidak kira kaedah yang digunakan, pilih kaedah yang paling sesuai mengikut keperluan sebenar. Dalam pembangunan sebenar, kita juga harus memberi perhatian kepada mengoptimumkan kod dan meningkatkan prestasi halaman.

Atas ialah kandungan terperinci jquery mengubah ketinggian dan lebar div. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!