How to get CSS class property in Javascript?

by

For modern browsers you can use getComputedStyle:

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

margin is a composite style, and not reliable cross-browser. Each of -top -right, -bottom, and -left should be accessed individually.

fiddle

More Related Contents:

  1. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  2. Hover over image to get a box with multiple links in html/JavaScript
  3. Reloading a single div in an html page [closed]
  4. How do you inject this code into HTML using Javascript?
  5. fixing slider on my website [closed]
  6. Full-screen iframe with a height of 100%
  7. How To Get Font Size in HTML
  8. Simulation background-size: cover in canvas
  9. How to Increase browser zoom level on page load?
  10. How to select nth line of text (CSS/JS)
  11. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  12. execCommand() is now obsolete, what’s the alternative?
  13. How to create a custom scrollbar on a div (Facebook style)
  14. HTML book-like pagination
  15. Creating a select box with a search option
  16. Passing mouse clicks through an overlaying element
  17. Highcharts – issue about full chart width
  18. How to make text over flow into two columns automatically
  19. How to resize Twitter Bootstrap modal dynamically based on the content
  20. Wait cursor over entire html page
  21. Retain scrollbar position even after reloading using javascript
  22. How can I make an image carousel with only CSS?
  23. HTML5 Drag and Drop – No transparency?
  24. How do I hide the address bar on iPhone?
  25. How to Bootstrap navbar static to fixed on scroll?
  26. How to use pagination on HTML tables?
  27. How to access css properties in javascript when applied via external CSS file?
  28. Split text into pages and present separately (HTML5)
  29. How can I reorder elements with JavaScript?
  30. Can you have multiple lines in an element?

Leave a Comment