Bagaimana untuk menetapkan sempadan div dalam jquery

Dalam pembangunan bahagian hadapan, elemen div ialah teg HTML yang kerap digunakan. Untuk mencantikkan antara muka web, kita selalunya perlu menambah sempadan pada div. Dalam jquery, kita boleh menetapkan sempadan untuk div dengan menetapkan nilai atribut css yang berbeza. Dalam artikel ini, kita akan belajar cara menetapkan sempadan div menggunakan jquery.

1. Gunakan fungsi css()

Dalam jquery, kita boleh menggunakan fungsi css() untuk menetapkan atribut css div. Kita boleh menetapkan sempadan untuk div dengan menetapkan nilai atribut css yang berbeza.

Pertama, kita perlu menetapkan kelas CSS untuk div:

Hello World!

Kemudian , dalam kod jquery kami, kami boleh menggunakan kod berikut untuk menetapkan sempadan:

$(document).ready(function(){

$('.my-div').css({
    'border-style': 'solid',
    'border-width': '1px',
    'border-color': '#000000'
});

});

Dalam contoh ini, kita mula-mula menggunakan fungsi $(document).ready() untuk membuat kod jquery dilaksanakan selepas dokumen itu siap. Kemudian, kami memilih elemen dengan kelas "my-div" dan menggunakan fungsi css() untuk menetapkan nilai tiga sifat css: gaya sempadan, lebar sempadan dan warna sempadan. Nilai atribut ini digunakan untuk menetapkan gaya sempadan, lebar dan warna elemen div.

2 Gunakan fungsi addClass()

Kami juga boleh menggunakan fungsi addClass() untuk menambah kelas gaya secara dinamik pada div. Dengan cara ini anda boleh dengan mudah mentakrifkan sempadan div dalam helaian gaya dan secara dinamik menambah kelas gaya pada div apabila diperlukan. Berikut ialah kod contoh:

Helaian gaya CSS:

.my-border {

border-style: solid;
border-width: 1px;
border-color: #000000;

}

Kod HTML:

Hello World!

Kod Jquery:

$(document).ready(function(){

$('.my-div').addClass('my-border');

});

Dalam contoh ini, kita mula-mula menggunakan fungsi $(document).ready() untuk membuat kod jquery dilaksanakan selepas dokumen itu siap. Kemudian, kami memilih elemen dengan kelas "my-div" dan menggunakan fungsi addClass() untuk menambah kelas gaya bernama "my-border" padanya. Kelas gaya ini mengandungi tetapan sempadan yang kami perlukan.

3. Gunakan helaian gaya

Akhir sekali, kita juga boleh menetapkan gaya sempadan untuk elemen div secara langsung dalam helaian gaya. Kaedah ini memerlukan mentakrifkan gaya div dalam helaian gaya, dan kemudian menggunakan gaya pada elemen div di mana kita perlu menetapkan sempadan dengan menetapkan ID elemen atau kelas. Berikut ialah contoh kod:

Helaian gaya CSS:

.my-border {

border-style: solid;
border-width: 1px;
border-color: #000000;

}

Kod HTML:

Hello World!

Dalam contoh ini, kami menetapkan dua nama kelas dalam elemen div: my-div dan my -sempadan. Nama kelas my-div tidak mengandungi sebarang gaya sempadan, ia hanya kelas biasa. Nama kelas sempadan saya mentakrifkan gaya sempadan. Dengan menggunakan kedua-dua nama kelas pada elemen div, kita boleh menetapkan sempadan untuknya.

Kami juga boleh menggunakan id untuk mengenal pasti elemen div yang perlu menetapkan sempadan, contohnya:

Helaian gaya CSS:

my-div {

border-style: solid;
border-width: 1px;
border-color: #000000;

}

Kod HTML:

Hello World!

Dalam contoh ini , elemen div Ia dikenal pasti oleh id "my-div". Kami juga menggunakan id ini dalam helaian gaya untuk menetapkan gaya sempadan untuk elemen.

Ringkasan:

Dengan mempelajari tiga cara menetapkan sempadan di atas, kita boleh menetapkan sempadan dengan mudah untuk elemen div dalam jquery. Kita boleh memilih cara yang paling sesuai untuk memenuhi keperluan kita mengikut keperluan kita. Apabila menggunakan gaya sempadan, kita juga harus cuba menggunakan helaian gaya untuk mengurusnya bagi memudahkan penyelenggaraan dan penggunaan semula kod.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan sempadan div dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!