Jquery: getting CSS or style

Question

I guess there is something obviously wrong with this:

var elem = document.getElementById("homepage-mobile-cat1"); 
console.log(elem);

var test1 = elem.style("margin-left");
var test2 = elem.css("margin-left");

This returns elem.style or elem.css function does not exist.

The output of console.log is

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text -->
  </a>        
</div>

You should be reading a lot about these methods and how this tasks are to be achieved.... — Rayon
– Rayon, Commented Dec 28, 2017 at 12:39
Use elem.style.marginLeft; and there is no method elem.css exists in javascript — maddy23285
– maddy23285, Commented Dec 28, 2017 at 12:41
you are trying to mix javascript with jquery. in javascript :- elem.style.marginLeft and in jquery it is $("#homepage-mobile-cat1").css("margin-left") — Negi Rox
– Negi Rox, Commented Dec 28, 2017 at 13:09

brk · Accepted Answer · 2017-12-28 12:41:23Z

style is not a function in javascript.elem.style.marginLeft will give the value

var elem = document.getElementById("homepage-mobile-cat1");
var test1 = elem.style.marginLeft;
console.log(test1)

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style=" margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style="">
      <p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p>
    </div>
    <!-- CSSTable homepage-cat-text -->
  </a>
  </div>

css is a jquery method & it will work with jquery object

console.log($("#homepage-mobile-cat1").css("margin-left"))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style="">
      <p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p>
    </div>
    <!-- CSSTable homepage-cat-text -->
  </a>
  </div>

user7159290 · Accepted Answer · 2017-12-28 12:53:34Z

1

Try jquery:

alert($('#homepage-mobile-cat1').css('margin-left'));

answered Dec 28, 2017 at 12:53

user7159290

Comments

orabis · Accepted Answer · 2017-12-28 12:44:24Z

var elem = document.getElementById("homepage-mobile-cat1"); 


// You can use this method to calculate the style
var test1 = window.getComputedStyle(elem).getPropertyValue("margin-left");
console.log(test1);


//Or directly get the value from style. But this requires the property value to be already assigned to the style. If not, use the method above.
console.log(elem.style.marginLeft);

//Or alternatively, you can use JQuery
console.log($("#homepage-mobile-cat1").css("margin-left"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="



     margin-left: 0 !important;"><a href="http://www.example.co.uk/literacy/">
      <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> <!-- CSSTable homepage-cat-text --></a>



      </div>

Mamun · Accepted Answer · 2017-12-28 12:47:27Z

0

Try elem.style.marginLeft.

var elem = document.getElementById("homepage-mobile-cat1"); 
console.log(elem);

var test1 = elem.style.marginLeft;
console.log(test1);

<div id="homepage-mobile-cat1" class="container homepage-mobile-cat red-background-mobile" style="margin-left: 0 !important;">
  <a href="http://www.example.co.uk/literacy/">
    <div class="CSSTable homepage-cat-text" style=""><p><span style="width:80%; display:block !important;margin:0 auto;">  Literacy Resources</span></p></div> 
  <!-- CSSTable homepage-cat-text -->
  </a>

</div>

answered Dec 28, 2017 at 12:47

Mamun

69k9 gold badges51 silver badges62 bronze badges

Collectives™ on Stack Overflow

Jquery: getting CSS or style

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related