Javascript Girl
  1. Javascript Girl
  3. Comment obtenir une propriété de classe CSS en Javascript?
Intereting Posts
Pourquoi inclure prototype.js briser le fonctionnement de jquery bbq? Three.js Comment obtenir la position d'un maillage? Rendre le document XML (obtenu via un appel ajax) vers une nouvelle fenêtre Exportation de table HTML avec le format correct en Javascript Mise en œuvre JavaScript de Gzip Impossible d'attacher l'auditeur d'événement à la toile? L'utilisation de jQuery est-elle une garantie pour la compatibilité de navigateur croisé? Module Express introuvable lorsqu'il est installé avec NPM Comment effectuer un tri insensible à la casse en Javascript? Comment passer les paramètres pour obtenir le rappel de la réussite de la réussite en rappel? Comment puis-je afficher les données JSON dans Chart.js avec Javascript si les valeurs statiques fonctionnent mais la dynamique de mySQL n'est pas? Codeigniter modifie l'action du formulaire en cliquant sur les boutons Comment puis-je obtenir la taille de la police d'un élément tel qu'il a été défini par css Les vues Hapi.js ne voient pas les scripts locaux Comment faire pivoter une matrice dans un tableau en javascript

Comment obtenir une propriété de classe CSS en Javascript?

 
.test { width:80px; height:50px; background-color:#808080; margin:20px; }

HTML – 

 <div class="test">Click Here</div>

En JavaScript, je veux margin:20px

Pour les navigateurs modernes, vous pouvez utiliser getComputedStyle : 

 var elem, style; elem = document.querySelector('.test'); style = getComputedStyle(elem); style.marginTop; //`20px` style.marginRight; //`20px` style.marginBottom; //`20px` style.marginLeft; //`20px`

margin est un style composite, et un navigateur croisé non fiable. Chacun de -top -right , -bottom et -left devrait être consulté individuellement.

violon

Je viens de publier un paquet npm à cet effet exactement. Vous pouvez le trouver ici sur npm ou github:

Npm: https://www.npmjs.com/package/stylerjs

Github: https://github.com/tjcafferkey/stylerjs

Vous l'utiliseriez comme si 

 var styles = styler('.class-name').get(['height', 'width']);

Et les styles seraient égaux 

 {height: "50px", width: "50px}

Donc, vous pouvez simplement obtenir les valeurs comme 

 var height = styles.height;

Utilisation de jQuery: 

  $('.class').css( "backgroundColor" );