Rumah > Artikel > hujung hadapan web > javascript menetapkan sempadan
javascript menetapkan sempadan
- WBOYasal
- 2023-05-16 10:43:072411semak imbas
JavaScript ialah bahasa pengaturcaraan yang berkuasa dan fleksibel yang boleh digunakan untuk mencipta tapak web interaktif dan menambah lebih banyak fungsi dan kreativiti pada tapak web. Dalam artikel ini, kita akan belajar cara menggayakan sempadan elemen tapak web menggunakan JavaScript.
Menetapkan gaya sempadan ialah salah satu cara paling biasa untuk menukar rupa halaman web. Fungsi ini boleh dicapai dengan baik menggunakan gaya CSS, tetapi kadangkala kita perlu menetapkan sempadan pada elemen halaman web yang dijana secara dinamik, dan kemudian kita perlu menggunakan JavaScript.
Terdapat dua cara utama untuk menetapkan gaya sempadan elemen dalam JavaScript: menggunakan atribut gaya dan menggunakan classList.
- Gunakan atribut gaya untuk menetapkan sempadan
Dalam JavaScript, kaedah yang sangat biasa untuk menggunakan atribut gaya untuk memanipulasi gaya elemen. Kita boleh menukar gaya elemen dengan menetapkan atribut gaya pada elemen dan memberikan nilai.
Seperti yang ditunjukkan di bawah, kami akan mencipta dokumen HTML ringkas yang mengandungi butang. Apabila pengguna mengklik butang, kami akan menggunakan JavaScript untuk menetapkan warna dan lebar sempadan butang.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript设置边框</title>
<style>
button {
padding: 20px;
font-size: 20px;
background-color: navy;
color: white;
border: none;
}
</style>
</head>
<body>
<button onclick="setBorder()">设置边框</button>
<script>
function setBorder() {
var button = document.getElementsByTagName("button")[0];
button.style.border = "5px solid yellow";
}
</script>
</body>
</html>Dalam kod di atas, kami telah menentukan elemen butang dalam dokumen HTML. Apabila pengguna mengklik butang, kami menggunakan JavaScript untuk mendapatkan elemen dan menetapkan warna dan lebar sempadannya. Dalam fungsi setBorder, kami menggunakan kaedah document.getElementsByTagName untuk mendapatkan elemen butang dalam halaman dan menggunakan atribut gaya untuk menetapkan gaya sempadan.
- Gunakan classList untuk menetapkan sempadan
classList ialah atribut yang sangat berguna dalam JavaScript, yang membolehkan kami menambah, mengalih keluar dan menukar kelas elemen dengan mudah. Dengan menambahkan kelas, kita boleh menetapkan pelbagai gaya elemen, termasuk gaya sempadan.
Seperti yang ditunjukkan di bawah, kami sekali lagi akan membuat dokumen HTML yang mengandungi dua butang. Apabila pengguna mengklik butang pertama, kami akan menambah kelas pada butang kedua menggunakan JavaScript. Kelas ini akan menetapkan gaya sempadan butang.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript设置边框</title>
<style>
button {
padding: 20px;
font-size: 20px;
background-color: navy;
color: white;
border: none;
}
.border {
border: 5px solid yellow;
}
</style>
</head>
<body>
<button onclick="addBorder()">添加边框</button>
<button onclick="resetBorder()">重置边框</button>
<script>
function addBorder() {
var button = document.getElementsByTagName("button")[1];
button.classList.add("border");
}
function resetBorder() {
var button = document.getElementsByTagName("button")[1];
button.classList.remove("border");
}
</script>
</body>
</html>Dalam kod di atas, kami mentakrifkan dua elemen butang. Apabila pengguna mengklik butang pertama, kami menambah kelas sempadan pada butang kedua menggunakan classList. Kelas sempadan ini ditakrifkan dalam gaya CSS dan mempunyai sempadan 5 piksel kuning. Apabila pengguna mengklik butang kedua, kami menggunakan kaedah classList untuk mengalih keluar kelas sempadan daripada butang kedua, sekali gus menetapkan semula gaya sempadan.
Ringkasan
Menetapkan gaya sempadan elemen halaman web dalam JavaScript adalah keperluan yang sangat biasa. Dengan menggunakan atribut gaya atau kaedah classList, kami boleh melaksanakan fungsi ini dengan mudah untuk menambahkan lebih banyak kreativiti dan kefungsian pada halaman web. Walaupun contoh di atas agak mudah, kaedah ini boleh digunakan untuk pelbagai situasi, membolehkan anda menguasai lebih banyak kemahiran dalam reka bentuk web dengan mudah.
Atas ialah kandungan terperinci javascript menetapkan sempadan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!