Get a CSS Value With JavaScript

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>

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 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

Get a CSS value from external style sheet with Javascript/jQuery

With jQuery:

// Scoping function just to avoid creating a global(function() {    var $p = $("<p></p>").hide().appendTo("body");    console.log($p.css("color"));    $p.remove();})();

p {color: blue}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How can I get a CSS value in its original unit with javascript?

Just for fun - this is wildly inefficient, but you could parse each stylesheet, check if each rule matches the element, if it does, add the rule to a list of matches. Then, for each match, check if setting the inline style of that element to that rule changes the computed value, if it doesn't, assume that is the rule in use:

const getCssActualValue = (el, property) => {
  const matches = new Set();
  const allCSS = [...document.styleSheets]
    .map(styleSheet => {
      try {
        return [...styleSheet.cssRules]
          .map(rule => rule.cssText)
          .join('');
      } catch (e) {
        console.log('Access to stylesheet %s is denied. Ignoring...', styleSheet.href);
      }
    })
    .filter(Boolean)
    .map(rule => rule.split('}'))
    .forEach((styleSheet) => {
        styleSheet.forEach((rule) => {
            const [selector, styles] = rule.split(' {');
            try {
                if (selector && el.matches(selector)) {
                    styles.split(';').map(el => el.trim()).forEach((rule) => {
                        const [prop, val] = rule.split(': ')
                        if (prop === property) {
                            matches.add(val);
                        }
                    });
                }
            } catch {}
        });
    });
    return Array.from(matches);
  }
  

  const getCurrentCssValue = (el, property) => {
    const matches = getCssActualValue(el, property);
    const current = getComputedStyle(el)[property];
    const currentInline = el.style[property];
    for (const match of matches) {
        el.style[property] = match;
        if (getComputedStyle(el)[property] === current) {
            el.style[property] = currentInline;
            console.log({match});
            return match;
        }
    }
    el.style[property] = currentInline;
    return currentInline;
  }
  
  const property = 'height';
  const el = document.getElementById('test');
  el.innerText = getCurrentCssValue(el, property);

#test{
  width:200px;
  height:20vh;
  background:LawnGreen;
}

<div id="test"></div>