Получить значение из CSS через querySelector

Question

Я пытаюсь получить конкретное значение, по классу CSS через querySelector, но до сих пор не могу найти решение:

То, что я пытаюсь получить является «40px» значение:

function onS(obj) { 
 
    var logo = document.querySelector('.logo'); 
 
    var value = logo.style.marginLeft; 
 
    alert(value); 
 
}

.logo { display: block; position: relative; margin-left: 40px; }

<div class="logo" onmouseover="onS(this)">Test!</div>

есть ли способ?

Answer 1

logo.style просто смотрит на атрибуте рядного style, он не получает вычисленный стиль.

Чтобы получить значения CSS из <style> в теге или внешнюю таблицу стилей, используйте window.getComputedStyle()

function onS(obj) { 
 
    var logo = document.querySelector('.logo'); 
 
    var value = window.getComputedStyle(logo).marginLeft; 
 
    alert(value); 
 
}

.logo { display: block; position: relative; margin-left: 40px; }

<div class="logo" onmouseover="onS(this)">Test!</div>

Answer 2

Я использовал JQuery, чтобы получить значение ...

function onS(obj) { 
 
    var logo = $('.logo'); 
 
    var value = logo.css('marginLeft'); 
 
    alert(value); 
 
}

.logo { display: block; position: relative; margin-left: 40px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="logo" onmouseover="onS(this)">Test!</div>