Takeaways Key
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>
<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>
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>
newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>
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>
<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>
<span>//change text color from red to green (classes specified in stylesheet)
</span><span>$('#div').removeClass('red').addClass('green');</span>
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>
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>
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>
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:
$ ("p"). Properties?
Ya, jQuery menyediakan kaedah .animate () yang membolehkan anda membuat animasi tersuai dengan menukar sifat CSS dari masa ke masa. Berikut adalah contoh:
}, 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:
Bolehkah saya menggunakan jQuery untuk menukar sifat CSS pada klik? Berikut adalah contoh:
$ ("p"). Klik (fungsi () {
$ (ini) .css ("warna", "merah");
});
Anda boleh menggunakan kaedah .scroll () dalam kombinasi dengan .css () untuk menukar sifat CSS apabila pengguna menatal halaman. Berikut adalah contoh:
$ (window) .scroll (function () {
Atas ialah kandungan terperinci JQuery Tukar CSS Dinamik - Ia ' s Mudah!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!