Как получить свойство класса CSS в Javascript?

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

HTML -

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

В JavaScript я хочу получить margin:20px

Ответ 1

Для современных браузеров вы можете использовать getComputedStyle:

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

margin - это сложный стиль, а не надежный кросс-браузер. Каждый из -top -right, -bottom и -left должен быть доступен индивидуально.

fiddle

Ответ 2

Я только что выпустил пакет для npm для этой цели. Вы можете найти его здесь на npm или github:

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

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

вы бы использовали его так

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

и стили будут равны

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

Итак, вы можете просто получить значения, подобные этому

var height = styles.height;

Ответ 3

Использование jQuery:

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