JQuery comment définir des données de classe css à un div mais sans fixer le nom de classe ou avec un autre nom de classe

Question

J'ai besoin de copier des données de classe à une div, mais sans fixer le nom de classe ou avec un autre nom de classe.

par exemple:

$('#blabla').addClass('xxx'); 

Et puis retirer le nom de la classe, mais en laissant les données de style. La chose est que j'ai besoin de définir les informations de style, mais je ne peux pas définir le nom de la classe, car il est en conflit avec un autre code.

Answer 1

Selon ce que les styles que vous essayez d'appliquer, il peut travailler à faire ce qui suit:

1. addClass()
2. Obtenez les propriétés CSS de votre élément et les appliquer en utilisant le code CSS() procédé
3. removeClass()

code:

var blabla = $('#blabla'); 
blabla.addClass('xxx'); 
blabla.css({ 
    fontWeight: blabla.css('fontWeight'), 
    display: blabla.css('display'), 
    float: blabla.css('float'), 
}); 
blabla.removeClass('xxx'); 

Answer 2

Vous pouvez boucle à travers tous les styles calculés pour cet élément et les appliquer dans un attribut de style, puis retirez le nom de la classe. Ou peut-être analyser les règles CSS et appliquer les styles de .xxx de cette façon.

Vous pouvez parcourir toutes les propriétés CSS comme ceci:

var elem = $('#blabla')[0],list = {},props; 
if (document.defaultView && document.defaultView.getComputedStyle) { 
    props = document.defaultView.getComputedStyle(elem, ""); 
    $.each(props, function(i, prop) { 
     list[prop] = props.getPropertyValue(prop); 
    }); 
} else if (elem.currentStyle) { // IE 
    props = elem.currentStyle; 
    $.each(props, function(prop, val) { 
     list[prop] = val; 
    }); 
} 

console.log(list) // the entire computed style object 

Si vous faites cela, vous obtiendrez également tous les styles hérités et calculés, même de la CSS du navigateur.

Answer 3

Utilisez getComputedStyle pour obtenir tous les styles appliqués à l'objet. Notez que ceci peut être une très grande liste.

var sourceDiv = $('#source'); 
var targetDiv = $('#target'); 

// IE 6,7,8 doesn't support this. Google how to make this cross-browser 
var styles = window.getComputedStyle(sourceDiv.get(0), null); 
var property, value; 

for(var i = 0; i < styles.length; i++) { 
    name = styles[i]; 
    value = sourceDiv.css(name); 
    targetDiv.css(name, value); 
} 

Cela me montre 207 propriétés pour chaque élément sur Chrome. Si vous appliquez cela à beaucoup d'éléments, cela peut ralentir les choses. Une approche plus rapide dans ce cas, serait de puiser directement dans les règles CSS et les styles déclarés par jQuery UI et manipuler uniquement les styles déclarés dans le fichier css, et non l'ensemble des styles calculés.