Comment utiliser jQuery pour lire/écrire les valeurs d'un élément défini en externe dans la classe css?

Question

J'ai un div dans un fichier html défini comme suit:

<div id="rangeTabAll"></div> 

Dans une feuille de style externe défini I définir le style suivant.

#rangeTabAll{ 
    top:45px; 
    left:124px; 
    width:186px; 
    height:114px; 
    display:none; 
    background:#ffffff url(../images/rangetab0.jpg) no-repeat; 
} 

Comment lire/écrire la valeur d'arrière-plan à l'aide de jQuery? Le

$('#rangeTabAll').css('background') 

méthode ne fonctionnera pas parce que ce n'est pas un style en ligne. Et

$('#rangeTabAll').attr('class') 

est indéfini.

Je peux le faire avec javascript tout simplement mais je me demande comment cela se fait via jQuery.

Answer 1

background est une propriété CSS « ​​magique » qui est étendu à toutes les différentes propriétés background-*, telles que background-image, background-color, background-repeat ...

Pour les obtenir dans jQuery vous appelleriez $('#rangeTabAll').css('backgroundColor') et ainsi de suite. Notez le camelCase au lieu de séparer les mots avec des tirets.

Je viens de remarquer que jQuery convertit background-color en backgroundColor etc. pour vous, donc vous n'aurez pas à vous en soucier. Vous pouvez également faire $('#rangeTabAll').css('background-color').

Answer 2

Rappelez-vous:

propriétés CSS sténographie (par exemple marge, fond, frontière) ne sont pas pris en charge. Par exemple, si vous souhaitez récupérer la marge rendu, utilisez: $ (élém) Css ('marginTop ') et $ (élém) Css (' marginRight'), et ainsi de suite.

de jQuery Documentation: CSS

dans votre exemple, l'arrière-plan est un raccourci pas pris en charge, vous devez écrire la pleine propriété.

pour

#rangeTabAll { 
    top:45px; 
    left:124px; 
    width:186px; 
    height:114px; 
    display:none; 
    background:#ffffff url(../images/rangetab0.jpg) no-repeat; 
} 

vous écririez:

$("#rangeTabAll").css("backgroundColor", "myNewValue"); 
$("#rangeTabAll").css("backgroundImage", "myNewValue"); 
$("#rangeTabAll").css("backgroundRepeat", "myNewValue"); 

ou

$("#rangeTabAll").css("background-color", "myNewValue"); 
$("#rangeTabAll").css("background-image", "myNewValue"); 
$("#rangeTabAll").css("background-repeat", "myNewValue"); 

Answer 3

Pourquoi ne pas définir votre arrière-plan alternatif en tant que classe CSS et utiliser $('#rangeTabAll').addClass('alternate') et $('#rangeTabAll').removeClass('alternate')?