Read CSS Property of an Element Using JavaScript

Read CSS property of an element using JavaScript

You have got two options:

Manually enumerating and parsing the document.styleSheets object (not recommended, unless you want to get all specific style properties defined by a certain selector).
Create an element matching the selector, and use the getComputedStyle or currentStyle (IE) method to get the property value.

In your example, attempt to get a certain property (let's say: color) of a div with class="layout":

function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}

Regarding comment at your question, another function:

The function below will ignore inline style definitions of the current element. If you want to know the style definitions inherited from a stylesheet (without inherited style definitions of the parent elements), traverse the tree, and temporary wipe the .cssText property, as shown in the funcion below:

function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}

How to get css property value in pure javascript

Seems that you're looking for

that.element.style.width
that.element.style.height
etc

How to get CSS value from JS?

Here is a way to check, with pure javascript, whether the dskcell element is displayed. If the media query applies (or there is no dskcell element), dskcellIsDisplayed will be false (otherwise it will be true).

document.addEventListener('DOMContentLoaded', () => {
  const elem = document.querySelector('.dskcell');
  const dskcellIsDisplayed = elem && window.getComputedStyle(elem, null).getPropertyValue("display") !== 'none';
  console.log(dskcellIsDisplayed);
});

div {
  border: 1px solid red;
}

body {
  background-color: lightgreen;
}

@media only screen and (max-width: 800px) {
  .dskcell {
    display: none;
  }
  body {
    background-color: lightblue;
  }
}

<div class="dskcell"></div>

Why am I not able to access CSS properties with JavaScript?

Combining comments and answers from others. For details you can refer those.

Two changes to be done to make it working

Add Border Style: border-top-style: solid;
Modify JS code to get the border color: alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);

 <!DOCTYPE html>

   <html>

   <meta charset="UTF-8">

   <head>

   <style>

   div

   {

      border-top-width: 15px;

      border-top-color: green;

      border-top-style: solid;

   }

   </style>

   </head>

   <body>

   <div id="myDiv">This is a div.</div>

   <br>

   <button type="button" onclick="myFunction()">Return top border color</button>

   <script>

   function myFunction() {

           alert(getComputedStyle(document.getElementById("myDiv")).borderTopColor);

        }

   </script>

   </body>

   </html>

How to get CSS class property in Javascript?

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

How to get the CSS left-property value of a div using JavaScript

The problem is that someElement.style.left only work if you have inline style. Since you apply your styling through a stylesheet, you will not be able to fetch the value the way you expect.

You have a couple of other approaches you could take to get the value through JavaScript:

window.getComputedStyle:

It is possible to get the computed style of an element using window.getComputedStyle, the problem is that it has quite limited support (IE9+). If you still want to use it you could wrap it up in a function to make it a bit easier to get each property:

function getCssProperty(elmId, property){
   var elem = document.getElementById(elmId);
   return window.getComputedStyle(elem,null).getPropertyValue(property);
}
// You could now get your value like
var left = getCssProperty("my-div", "left");

Working example

jQuery (or some other library):

Another option would be to use a JavaScript library like jQuery (or whatever you prefer), which will provide you with a cross-browser solution to get the value.

With jQuery you could use the .css() method to read the CSS-property of the element.

$(function () {
  var left = $("#my-div").css("left");
});

Working example

Read CSS Property of an Element Using JavaScript