使用JavaScript获取CSS值

我知道我可以通过JavaScript设置CSS值，如:

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

但是，我能得到当前特定的样式值吗?我已经读到我可以得到元素的整个风格，但我不想不得不解析整个字符串，如果我不需要的话。

当前回答

元素。style属性让你只知道在该元素中定义为内联的CSS属性(通过编程方式，或者在元素的style属性中定义)，你应该得到计算的样式。

在跨浏览器的方式中并不是那么容易做到的，IE有自己的方式，通过元素。而DOM Level 2的标准方式，被其他浏览器实现是通过document.defaultView.getComputedStyle方法。

这两种方式有区别，例如IE元素。currentStyle属性期望你访问由两个或多个单词组成的CSS属性名(如maxHeight, fontSize, backgroundColor等)，标准方式期望用破折号分隔的属性(如max-height, font-size, background-color等)。．．．．．．

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

主参考堆栈溢出

2013-04-19 20:11:34

其他回答

如果你以编程方式设置它，你可以像调用变量一样调用它(即document.getElementById('image_1').style.top)。否则，你可以使用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>

2011-06-14 01:50:47

元素。style属性让你只知道在该元素中定义为内联的CSS属性(通过编程方式，或者在元素的style属性中定义)，你应该得到计算的样式。

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

主参考堆栈溢出

2013-04-19 20:11:34

您可以使用getComputedStyle()。

var element = document.getElementById('image_1')， style = window.getComputedStyle(element) top = style.getPropertyValue('top'); console.log(上); < img id = " image_1 " >

jsFiddle。

2011-06-14 01:40:55

使用下面的方法。它帮助了我。

document.getElementById('image_1').offsetTop

参见获取样式。

2011-08-09 09:22:57

跨浏览器的解决方案，检查CSS值没有DOM操作:

function get_style_rule_value(selector, style)
{
 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
   if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector)
   {
    return myrules[j].style[style];
   }
  }
 }
};

用法:

get_style_rule_value('.chart-color', 'backgroundColor')

净化版本(强制选择器输入为小写，并允许用例不带前导"。")

function get_style_rule_value(selector, style)
{
 var selector_compare=selector.toLowerCase();
 var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

 for (var i = 0; i < document.styleSheets.length; i++)
 {
  var mysheet = document.styleSheets[i];
  var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;

  for (var j = 0; j < myrules.length; j++)
  {
    if (myrules[j].selectorText)
    {
     var check = myrules[j].selectorText.toLowerCase();
     switch (check)
     {
      case selector_compare  :
      case selector_compare2 : return myrules[j].style[style];
     }
    }
   }
  }
 }

2014-10-09 07:29:18

使用JavaScript获取CSS值

推荐文章

最新文章

标签