Rumah > hujung hadapan web > tutorial js > JQuery Tukar CSS Dinamik - Ia ' s Mudah!

JQuery Tukar CSS Dinamik - Ia ' s Mudah!

Christopher Nolan
Lepaskan: 2025-03-03 00:49:08
asal
933 orang telah melayarinya

JQuery Tukar CSS Dinamik - Ia ' s Mudah!

Takeaways Key

  • JQuery menyediakan cara mudah untuk mengubah gaya CSS secara dinamik di laman web, menggunakan fungsi .css () untuk mengubah suai sifat tertentu, seperti warna, terapung, warna latar belakang, dan banyak lagi.
  • Di samping mengubah gaya CSS sedia ada, jQuery membolehkan penyingkiran gaya melalui kaedah .removeclass (), dan lanjutan gaya sedia ada berdasarkan nilai semasa mereka, seperti padding atau margin.
  • pelbagai sifat CSS boleh diubah serentak menggunakan jQuery, dan juga mungkin untuk menambah, membuang atau togol kelas CSS pada unsur -unsur, menghidupkan sifat CSS, atau menukar sifat CSS berdasarkan nilai semasa mereka, interaksi pengguna seperti hover, klik, atau tatal.
JQuery Tukar CSS Dinamik - Ia ' s Mudah! Demo fungsi CSS Menukar gaya laman web anda secara dinamik kini menjadi kegilaan yang mengambil alih web! Dalam jawatan pendek ini, tetapi manis saya akan menerangkan bagaimana untuk melakukan beberapa helah CSS yang mudah tetapi berkesan menggunakan jQuery. Ini mesti tahu untuk semua pemaju jQuery yang anda gemari!

Tukar elemen CSS spesifik

Ia sangat mudah untuk menukar CSS dengan jQuery ini adalah format fungsi .css ().
<span>$('jQuery selector').css({"css property name":"css property value"});</span>
Salin selepas log masuk
Berikut adalah beberapa contoh biasa:
<span>//change paragraph text colour to green 
</span><span>$('p').css({"color":"green"});
</span>
<span>//float all divs with class .left
</span><span>$('div.left').css('float');
</span>
<span>//change all elements with class .bg-red to have a red background
</span><span>$('.bg-red').css({"background-color":"red"});</span>
Salin selepas log masuk

Nest JQuery CSS Commands

Adalah berguna untuk mengetahui jQuery sama-sama boleh mentafsir CSS dan pemformatan DOM bagi pelbagai sifat perkataan. Ini bukan sahaja menjimatkan banyak masa tetapi kelihatan lebih cantik!
newimg<span>.css({'background-image': 'url('+newimgsrc+')'});
</span>newimg<span>.css({'position': 'absolute'});
</span>newimg<span>.css({'height': '70px'});
</span>newimg<span>.css({'width': '200px'});
</span>newimg<span>.css({'top': '68px'});
</span>newimg<span>.css({'right': '2px'});</span>
Salin selepas log masuk
Sama seperti:
newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>
Salin selepas log masuk

Keluarkan gaya CSS

Terdapat dua cara utama untuk mengeluarkan gaya CSS tidak banyak perbezaan di antara mereka. 1. Anda boleh mengeluarkan kelas yang berkaitan dengan halaman atau elemen
<span>//remove text color from a div
</span><span>$('#mydiv').removeClass('colors');</span>
Salin selepas log masuk
2. Anda juga boleh mengeluarkan gaya CSS pada unsur -unsur tertentu secara langsung
<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>
Salin selepas log masuk
Ini juga merupakan helah CSS jQuery yang bagus untuk mengeluarkan dan menambah kelas dalam panggilan yang sama.
<span>//change text color from red to green (classes specified in stylesheet)
</span><span>$('#div').removeClass('red').addClass('green');</span>
Salin selepas log masuk

memperluaskan nilai gaya sedia ada

Anda mungkin ingin memanjangkan gaya berdasarkan nilai semasa. Sebagai contoh, jika elemen padding-kiri adalah 10px maka kod berikut akan menghasilkan jumlah padding-kiri 25px.
<span>.css( "padding-left", "+=15" )</span>
Salin selepas log masuk

jQuery .css () Fungsi harta

Oleh kerana kebanyakan anda pemaju jQuery yang gemar tahu, seperti JQuery 1.4, .css () membolehkan kami lulus fungsi sebagai nilai harta. Ini berguna untuk mengembalikan nilai CSS semasa untuk menentukan perubahan.
<span>$('div.example').css('width', function(index) {
</span>  <span>return index * 50;
</span><span>});</span>
Salin selepas log masuk

latar belakang biasa CSS berubah

Berikut adalah beberapa contoh perubahan CSS latar belakang.
<span>$('#myDiv').css('background-image', 'my_image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css('background', 'path/to/image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css("background-image", "url(/myimage.jpg)");  
</span>
<span><br /><br />
</span><span><h2>A Full Code Example - Set Div Background Image</h2>
</span><span>This is a full example of jQuery Code to set a background image into a div dynamically when the page is loaded.
</span>
<span>[code lang="js"]
</span><span><script type='text/javascript'>
</span><span>$(document).ready(function() {
</span>	<span>//preload image (add timestamp to prevent cache)
</span>	<span>var newimgsrc = 'https://www.sitepoint.com/wp-content/uploads/jquery4u/2011/03/jquery-plugins2.jpg?' + (new Date().getTime());
</span>	<span>var newimg = $('#header');
</span>    <span>//replace the image
</span>	<span>$('#header').css("background-image", "url("+newimgsrc+")");
</span>	newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});
</span>	newimg<span>.show();
</span><span>});
</span><span></script></span>
Salin selepas log masuk

soalan yang sering ditanya mengenai menukar CSS dengan jQuery

Bagaimana saya boleh menggunakan jQuery untuk menukar pelbagai sifat CSS sekaligus? Kaedah ini menerima objek di mana anda boleh menentukan pelbagai sifat CSS dan nilai baru mereka. Inilah contoh:

$ ("p"). Unsur -unsur?
Ya, jQuery menyediakan kaedah .AddClass () yang membolehkan anda menambah satu atau lebih kelas kepada elemen terpilih. Ini amat berguna apabila anda mempunyai kelas CSS yang telah ditetapkan dan anda mahu menggunakannya secara dinamik. Begini cara anda boleh melakukannya:

$ ("p"). AddClass ("sorotan");
Dalam contoh ini, kelas "sorotan" akan ditambah kepada semua elemen perenggan.

Bagaimana saya boleh mengeluarkan kelas CSS dari unsur -unsur menggunakan jQuery? Berikut adalah contoh:

$ ("p"). Penyingkiran ("sorotan");
Dalam contoh ini, kelas "menyoroti" akan dikeluarkan dari semua elemen perenggan. Ia belum hadir, atau mengeluarkannya jika ia berlaku. Berikut adalah contoh:

$ ("p"). Toggleclass ("sorotan"); Anda hanya perlu lulus nama harta sebagai rentetan. Berikut adalah contoh:

var color = $ ("p"). Css ("warna"); kaedah. Fungsi ini akan dipanggil untuk setiap elemen yang dipilih, dan nilai pulangannya akan digunakan sebagai nilai baru untuk harta tersebut. Berikut adalah contoh:

$ ("p"). Properties?

Ya, jQuery menyediakan kaedah .animate () yang membolehkan anda membuat animasi tersuai dengan menukar sifat CSS dari masa ke masa. Berikut adalah contoh:

$ ("p"). Animate ({

"opacity": 0.5,

"saiz font": "200%"

}, 2000); Sifat -sifat pada hover?

Anda boleh menggunakan kaedah .hover () dalam kombinasi dengan .css () untuk menukar sifat CSS apabila penunjuk tetikus melayang ke atas elemen. Berikut adalah contoh:

$ ("p"). Hover (function () {

$ (ini) .css ("warna", "merah"); Tetapkan semula ke warna asal apabila penunjuk tetikus daun.

Bolehkah saya menggunakan jQuery untuk menukar sifat CSS pada klik? Berikut adalah contoh:

$ ("p"). Klik (fungsi () {
$ (ini) .css ("warna", "merah");
});

Bagaimana saya boleh menggunakan jQuery untuk menukar sifat CSS pada tatal?

Anda boleh menggunakan kaedah .scroll () dalam kombinasi dengan .css () untuk menukar sifat CSS apabila pengguna menatal halaman. Berikut adalah contoh:

$ (window) .scroll (function () { $ ("p"). Css ("warna", "merah");

Atas ialah kandungan terperinci JQuery Tukar CSS Dinamik - Ia ' s Mudah!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan