Get a CSS value with JavaScript

前端 未结 9 1445
温柔的废话
温柔的废话 2020-11-21 07:55

I know I can set a CSS value through JavaScript such as:

document.getElementById(\'image_1\').style.top = \'100px\';

But, can I

相关标签:
9条回答
  • 2020-11-21 07:57

    In 2020

    check before use

    You can use computedStyleMap()

    The answer is valid but sometimes you need to check what unit it returns, you can get that without any slice() or substring() string.

    var element = document.querySelector('.js-header-rep');
    element.computedStyleMap().get('padding-left');
    

    var element = document.querySelector('.jsCSS');
    var con = element.computedStyleMap().get('padding-left');
    console.log(con);
    .jsCSS {
      width: 10rem;
      height: 10rem;
      background-color: skyblue;
      padding-left: 10px;
    }
    <div class="jsCSS"></div>

    0 讨论(0)
  • 2020-11-21 07:58

    If you set it programmatically you can just call it like a variable (i.e. document.getElementById('image_1').style.top). Otherwise, you can always use jQuery:

    <html>
        <body>
            <div id="test" style="height: 100px;">Test</div>
            <script type="text/javascript" src="jquery.min.js"></script>
            <script type="text/javascript">
                alert($("#test").css("height"));
            </script>
        </body>
    </html>
    
    0 讨论(0)
  • 2020-11-21 08:04

    Use the following. It helped me.

    document.getElementById('image_1').offsetTop
    

    See also Get Styles.

    0 讨论(0)
  • 2020-11-21 08:13

    The cross-browser solution without DOM manipulation given above does not work because it gives the first matching rule, not the last. The last matching rule is the one which applies. Here is a working version:

    function getStyleRuleValue(style, selector) {
      let value = null;
      for (let i = 0; i < document.styleSheets.length; i++) {
        const mysheet = document.styleSheets[i];
        const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
        for (let j = 0; j < myrules.length; j++) {
          if (myrules[j].selectorText && 
              myrules[j].selectorText.toLowerCase() === selector) {
            value =  myrules[j].style[style];
          }
        }
      }
      return value;
    }  
    

    However, this simple search will not work in case of complex selectors.

    0 讨论(0)
  • 2020-11-21 08:15

    You can use getComputedStyle().

    var element = document.getElementById('image_1'),
        style = window.getComputedStyle(element),
        top = style.getPropertyValue('top');
    

    jsFiddle.

    0 讨论(0)
  • 2020-11-21 08:15

    The element.style property lets you know only the CSS properties that were defined as inline in that element (programmatically, or defined in the style attribute of the element), you should get the computed style.

    Is not so easy to do it in a cross-browser way, IE has its own way, through the element.currentStyle property, and the DOM Level 2 standard way, implemented by other browsers is through the document.defaultView.getComputedStyle method.

    The two ways have differences, for example, the IE element.currentStyle property expect that you access the CSS property names composed of two or more words in camelCase (e.g. maxHeight, fontSize, backgroundColor, etc), the standard way expects the properties with the words separated with dashes (e.g. max-height, font-size, background-color, etc). ......

    function getStyle(el, styleProp) {
        var value, defaultView = (el.ownerDocument || document).defaultView;
        // W3C standard way:
        if (defaultView && defaultView.getComputedStyle) {
            // sanitize property name to css notation
            // (hyphen separated words eg. font-Size)
            styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
            return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
        } else if (el.currentStyle) { // IE
            // sanitize property name to camelCase
            styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
                return letter.toUpperCase();
            });
            value = el.currentStyle[styleProp];
            // convert other units to pixels on IE
            if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
                return (function(value) {
                    var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
                    el.runtimeStyle.left = el.currentStyle.left;
                    el.style.left = value || 0;
                    value = el.style.pixelLeft + "px";
                    el.style.left = oldLeft;
                    el.runtimeStyle.left = oldRsLeft;
                    return value;
                })(value);
            }
            return value;
        }
    }
    

    Main reference stackoverflow

    0 讨论(0)
提交回复
热议问题