Get value from CSS through querySelector

Question

I am trying to get a specific value on CSS class through querySelector but still can't find a solution:

What I'm trying to get is the "40px" value:

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>

Is there any way?

castletheperson · Accepted Answer · 2016-06-08 15:13:46Z

3

logo.style just looks at the inline style attribute, it doesn't get the computed style.

To get CSS values from a <style> tag or external stylesheet, use 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>

answered Jun 8, 2016 at 15:02

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

castletheperson · Accepted Answer · 2016-06-08 15:15:08Z

1

I used jQuery to get the value...

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>

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

answered Jun 8, 2016 at 14:59

WalksAway

2,8292 gold badges24 silver badges44 bronze badges