Jquery ile div'den stil niteliği ekleme ve kaldırma

103

Üzerinde çalıştığım bir projeyi miras aldım ve bazı jquery animasyonlarını güncelliyorum (jquery ile çok az uygulama).

Stil özelliğini eklemem ve kaldırmam gereken bir div var. İşte div:

<div id='voltaic_holder'>

Animasyonun bir noktasında ona bir stil eklemem gerekiyor:

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

.removeAttr()Etrafı araştırdım ve yöntemi buldum ama nasıl ekleneceğini veya hatta uzak kısımlarını göremiyorum (üstteki gibi: sadece -75px).

Teşekkürler,

jquery css dhtml

— ItsPronounced
kaynak

$('voltaic_holder').style = nullbelki? Tarzların kendi nesne ağacı vardır. diğer özelliklerin çoğu yalnızca anahtar = değer türü verileridir.

— Marc B

246

Aşağıdakilerden herhangi birini yapabilirsiniz

Her stil özelliğini ayrı ayrı ayarlayın:

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

Aynı anda birden çok stil özelliğini ayarlayın:

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

Belirli bir stili kaldırın:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Stil niteliğinin tamamını kaldırın:

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

— Adam Albrecht
kaynak

Her satıra 1'den fazla css özelliği ekleyebilir miyim? Yoksa her stil özelliği için şu şekilde bir tane mi yapmalıyım: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");

— ItsPronounced

3

Buna cevap vermek için evet yapabilirsin. .Css () işlevinde bir nesne değişmezi kullanın. $ ['Foo']. Css ({'yükseklik': '30px', 'genişlik': '50px'});

— Richard Neil Ilagan

@AdamAlbrecht $ ("# voltaic_holder") içinde eklediğim belirli stili nasıl kaldırabilirim. RemoveAttr ("stil") varsayılan olarak yeni eklenen tüm uygulanan stili kaldırır.

— 3 kural

21

voltaic_holderYayılma alanının stil niteliğini tamamen kaldırmak için şunu yapın :

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

Bir öznitelik eklemek için şunu yapın:

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

Yalnızca en üst stili kaldırmak için şunu yapın:

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

— Peter Olson
kaynak

15

JQuery kullanıyorsanız, CSS eklemek için css kullanın

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

CSS niteliklerini kaldırmak için

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

— Justkt
kaynak

Voltaic_holder öğesinden position veya top niteliğini kaldıramazsınız, çünkü bu özniteliklere sahip değildir. Bunlar, stil niteliğinde tanımlanan css özellikleridir.

— Peter Olson

@Peter - doh! Kullanılacak şekilde düzenlendi.css

— justkt

10

Bunu halletmenin kolay yolu (ve önyüklemek için en iyi HTML çözümü), kullanmak istediğiniz stillere sahip sınıflar oluşturmaktır. O zaman basit bir addClass () ve removeClass () , hatta toggleClass () kullanımı meselesidir .

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

ya da

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

— Gerçeküstü Düşler
kaynak

2

Anwer burada jQuery kullanarak metin hizalama için dinamik olarak bir stil ekleme

— TheHorse
kaynak

2

JQuery for ! ' Da .css yöntemi olması durumunda önemli kural uygulanmayacaktır.

Bu durumda .attr işlevini kullanmalıyız .

Örneğin: Aşağıdaki gibi stil eklemek istiyorsanız:

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

Kullanmalısın:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Umarım birine yardımcı olur.

— Adiyya Tadikamalla
kaynak

1

J sorgusunu kullanarak stil özniteliğini div'den kaldırın:

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

J sorgusunu kullanarak div'e stil ekleyin:

$("#TableDiv").attr("style", "display: none;");

Html kullanarak stil ekleyin:

<div class="row" id="TableDiv" style="display: none;">
</div>

Umarım yardımcı olur :)

— Wajid Khan
kaynak