2011-03-22 15 views
68

Çalıştığım bir projeyi miras aldım ve jQuery animasyonlarını güncelliyorum (jquery ile çok az uygulama).Jquery ile stil özniteliği ekleme ve çıkarma jquery

Bir div var, stil özelliğini eklemek ve kaldırmak istiyorum. Ben buna bir stil eklemek gerekir

<div id='voltaic_holder'> 

animasyon bir noktada: İşte div olduğunu Etrafa arandı ve .removeAttr() yöntemi buldum

<div id='voltaic_holder' style='position:absolute;top:-75px'> 

ama göremiyorum nasıl eklenir, hatta bunun uzak kısımları (üstte olduğu gibi: -75px).

sayesinde, jQuery kullanıyorsanız

+0

'$ ('voltaic_holder') style = null' belki.

$("#voltaic_holder").css({"top": ""}); // or $("#voltaic_holder").css("top", ""); 
tüm stil özelliği kaldırılsın mı? Stillerin kendi tüm nesne ağacı vardır. diğer özelliklerin çoğu sadece anahtar = değer türü verileridir. –

cevap

156

tek tek aşağıdaki

Set her stil özelliğinin herhangi yapabilirdi:

$("#voltaic_holder").css("position", "relative"); 

Set birden stil özelliklerini aynı anda:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"}); 

Belirli bir stili kaldırın:

$("#voltaic_holder").removeAttr("style") 
+0

'u kullanmak üzere düzenlenmiştir Her satırda 1'den fazla css özelliği ekleyebilir miyim? Ya da her stil özelliği için bir tane yapmam gerekiyor: '$ (" # voltaic_holder ") css (" position "," relative "); ' $ ("# voltaic_holder"). Css (" yukarı "," -75 ");' – drpcken

+3

Bunu cevaplamak için evet yapabilirsiniz. Sadece .css() işlevi üzerinde bir nesne literal kullanın. $ ('Foo') gibi css ({'height': '30px', 'width': '50px'}); –

+0

Evet, düzeltilmiş cevabımı –

15

,

$("#voltaic_holder").css({'position': 'absolute', 
    'top': '-75px'}); 

CSS

$("#voltaic_holder").css({'position': '', 
    'top': ''}); 
+0

thos özniteliklerine sahip olmadığından, konumu veya üst niteliği voltaic_holder öğesinden kaldıramazsınız.Bunlar, stil özniteliğinde tanımlanan css özellikleridir. –

+0

@Peter - doh! '.css' – justkt

7

kolay CSS eklemek için css kullanmak olduğunu Bunu işlemek için yol (ve en iyi Önyüklenecek HTML çözümü) kullanmak istediğiniz stilleri olan sınıfları oluşturmaktır. Daha sonra addClass() ve removeClass(), hatta toggleClass()'u kullanmanız basit bir meseledir.

$('#voltaic_holder').addClass('shiny').removeClass('dull'); 

hatta

$('#voltaic_holder').toggleClass('shiny dull'); 
16

tamamen voltaic_holder yayılma stil özelliği kaldırmak için şunu yapın:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute"); 
:

$("#voltaic_holder").removeAttr("style"); 

bir öznitelik eklemek için bunu yapmak

Yalnızca kaldırmak için Üst tarzı Bunu yapmak:

$("#voltaic_holder").css("top", "");