Comment obtenir toutes les feuilles de style CSS de façon dynamique dans jQuery?

Question

Je veux obtenir tous les styles qui ont été définis dynamiquement (ce qui s'applique en tant que styles en ligne) sur un élément.

Par exemple

<span class="text" style="color: rgb(128, 128, 255); font-size: 24px;">Name</span> 

Je veux obtenir la valeur de l'attribut de style dans une variable JS et enregistrez-le. J'ai essayé d'utiliser .attr (« style ») jQuery, mais il est de donner non définie

De plus, comme le suggère ici How to get inline CSS style property from element utiliser

getComputedStyle 

mais pour obtenir des styles que je dois parler de tous les styles comme

var el = document.querySelector("selector") 
console.log(el.style.SomeStyle); 

mais il existe différents styles qu'un utilisateur peut définir dynamiquement. Donc, dois-je mentionner tous les styles en ligne individuellement ou y at-il une meilleure façon d'obtenir cela?

Merci à l'avance pour toute aide

Mise à jour de la void's commentaire:

Comme décrit ici Can jQuery get all CSS styles associated with an element?

marknadal avait écrit une fonction qui extrait à la fois en ligne et les styles externes, mais je besoin des styles en ligne sans tenir compte de toutes les classes css attachées

Answer 1

Vous pouvez utiliser getAttribute:

const el = document.querySelector('my-element'); 
const styleStr = el.getAttribute('style'); 

par exemple, les éléments suivants:

<div style="color:blue;display:flex;"></div> 

céderais:

'color:blue;display:flex;' 

Vous pouvez ensuite utiliser une regex ou quelque chose pour l'analyser au besoin. Je recommande de convertir en un tableau de tableaux ou une structure similaire plutôt que d'un objet, car vous ne savez probablement pas quelles valeurs sont disponibles (c'est une façon simple de le faire, et il y a probablement un moyen beaucoup plus efficace de briser.Je laisse cela à vous):

// gives [ ['color', 'blue'], ['display', 'flex'] ] 
str.slice(0, str.length - 1).split(';').map(x => x.split(':')) 

Vous pouvez convertir à un objet et utiliser une boucle for in avec obj.hasOwnProperty(key) ainsi.

jQuery alternatif:

const els = $('my-element'); 
els.each((i, el) => { 
    const styleStr = els.attr('style'); 
    const styles = styleStr.slice(0, styleStr.length - 1).split(';').map(x => x.split(':')); 
}); 

Answer 2

Vous pouvez itérer sur o bjet disponible sous le champ de l'élément « de style » comme suit:

Avertissement Cet objet contient également tous style possible de l'élément (avec des clés de propriété non numériques), boucle donc avec par exemple pour (sth dans les styles) ne fonctionnera pas. Vous devez parcourir les styles en mode tableau comme indiqué ci-dessous.

var el = document.querySelector("selector"); 
var styles = el.style; 

for (var i = 0, len = styles.length; i < len; ++i) { 
    var name = styles[i]; 
    var value = styles[value]; 

    console.log(name); // shows style name, e.g.: color, padding, etc 
    console.log(value); // shows style value, e.g.: #fff, 20px, etc 
}