web-dev-qa-db-fra.com

Comment obtenir la 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 obtenir margin:20px

javascripthtmlcss
24
Chinmay235

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 n'est pas fiable pour plusieurs navigateurs. -top-right, -bottom et -left doivent être accessibles individuellement.

violon

22
zzzzBov

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 ça

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

et les styles seraient égaux

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

Donc, vous pouvez simplement obtenir les valeurs telles que

var height = styles.height;
2
tjcafferkey

Utilisation de jQuery:

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