Bagaimana untuk mendapatkan gaya dengan jquery? Analisis ringkas kaedah

Dalam pembangunan web, kadangkala kita perlu mendapatkan gaya elemen tertentu, seperti lebar, tinggi, warna, dll. Hari ini saya akan memperkenalkan cara jQuery memperoleh gaya.

Pertama sekali, kita perlu tahu bahawa jQuery menyediakan fungsi yang dipanggil css(), yang boleh digunakan untuk mendapatkan dan menetapkan gaya. Fungsi ini mempunyai dua parameter, parameter pertama ialah atribut gaya yang akan diperolehi, dan parameter kedua ialah nilai atribut (pilihan).

Jadi, bagaimana kita menggunakan fungsi css()? Berikut adalah beberapa contoh.

Dapatkan lebar dan ketinggian elemen:

var w = $("#myElement").css("width");
var h = $("#myElement").css("height");

Dapatkan warna latar belakang elemen:

var bgColor = $("#myElement").css("background-color");

Dapatkan warna jidar elemen:

var borderColor = $("#myElement").css("border-color");

Dapatkan saiz fon elemen:

var fontSize = $("#myElement").css("font-size");

Dapatkan ketelusan elemen:

var opacity = $("#myElement").css("opacity");

Selain atribut gaya yang biasa digunakan di atas , fungsi css() juga boleh mendapatkan atribut gaya lain, seperti pelapik, jidar, jidar, dsb. Jika anda ingin menetapkan gaya, parameter kedua fungsi css() berguna. Contohnya, untuk menetapkan warna latar belakang elemen kepada merah, anda boleh menulis:

$("#myElement").css("background-color", "red");

Kadangkala, kita perlu mendapatkan gaya elemen yang dikira, iaitu gaya sebenar elemen dalam penyemak imbas, bukannya gaya helaian gaya yang ditakrifkan dalam . Pada masa ini, kita boleh menggunakan fungsi lain getComputedStyle(), yang digunakan seperti berikut:

var elem = document.getElementById("myElement");
var style = window.getComputedStyle(elem);
var width = style.getPropertyValue("width");

getComputedStyle()Fungsi mengembalikan objek yang mengandungi atribut dan nilai semua gaya pengiraan. Kita boleh menggunakan fungsi getPropertyValue() untuk mendapatkan nilai atribut gaya tertentu.

Berbanding dengan fungsi css(), fungsi getComputedStyle() lebih berkuasa dan boleh mendapatkan lebih banyak atribut gaya, tetapi ia juga lebih menyusahkan untuk digunakan. Kita boleh memilih fungsi mana yang hendak digunakan berdasarkan keperluan sebenar.

Dalam pembangunan sebenar, adalah keperluan yang sangat biasa untuk mendapatkan atribut gaya elemen. Selepas menguasai fungsi css() yang disediakan oleh jQuery dan fungsi getComputedStyle() yang disediakan oleh DOM, kita boleh mendapatkan dan menetapkan gaya elemen dengan mudah.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan gaya dengan jquery? Analisis ringkas kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!