使用JavaScript获取CSS值

199

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

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

但是，我可以获得当前的特定样式值吗？我已经读到了可以获取元素整个样式的地方，但是如果不需要的话，我不想解析整个字符串。

javascript  css 
— 迈克尔·保罗
source
您试图获得什么“特定样式值”？
— BryanH 2011年
当前的定位值：高度，宽度，顶，边缘等
— 迈克尔保罗
2
您的问题使您相信var top = document.getElementById('image_1').style.top; ，如果不是那样的话，您可能会想要像May想要改写它
— Marc
全部，这两种方法都可以正常工作，正是我需要的。Jquery方法更为紧凑，因此我可能会使用它。
— 迈克尔·保罗

Answers:

356

您可以使用getComputedStyle()。

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

jsFiddle。

— 亚历克斯
source
10
例如，如果您想更改div的背景色，请注意不要使用“ backgroundColor”而不是“ backgroung-color”;）
— baptx 2012年
4
slw是首字母缩写词吗？还是慢？
— David Winiecki 2014年
3
IE 8及更低版本不支持getComputedStyle。
— David Winiecki 2014年
6
有点不对劲：有些（全部？）速记css属性无法在JavaScript中访问。例如，您可以向左填充，但不能填充。JSFiddle
— David Winiecki 2014年
4
@DavidWiniecki我真的不相信webdev仍然应该将IE8视为主流浏览器。考虑到它不再受Microsoft支持
— Kevin Kuyl 2015年
23

element.style属性仅让您知道在该元素中定义为内联的CSS属性（以编程方式或在元素的style属性中定义），您应该获取计算出的样式。

以跨浏览器的方式进行操作并非易事，IE通过element.currentStyle属性具有自己的方式，而其他浏览器通过document.defaultView.getComputedStyle方法实现的DOM Level 2标准方式。

两种方式有所不同，例如IE element.currentStyle属性期望您访问由camelCase中的两个或更多单词组成的CSS属性名称（例如maxHeight，fontSize，backgroundColor等），标准方法期望具有用破折号分隔的单词（例如，最大高度，字体大小，背景颜色等）。......

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

主要参考书架溢出

— 阿米尔·莫瓦赫迪​​（Amir Movahedi）
source
16

跨浏览器解决方案，无需DOM操作即可检查CSS值：

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];
     }
    }
   }
  }
 }
— 卡罗尔夫
source
我度过了漫长的一天，但由于多种原因，这没有用。pastie.org/9754599可以通过排除无效的规则列表并在最后的===两侧使用小写来更好地工作。非常感谢您的解决方案仍然挽救了这一天！
— 理查德·福克斯
很好的答案，最后添加了一个经过清理的版本，以解决一些边缘案例的使用问题。
— 不同步的
7

如果以编程方式进行设置，则可以像变量一样调用它（即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>
— 乏味的
source
7
我认为您的jQuery示例不是很清楚（或正确）。
— alex
style属性返回所有适用于元素的内联样式，而不是由css规则定义。
— 史蒂文·科赫
2

如果您喜欢图书馆，为什么不推荐MyLibrary和getStyle。

jQuery css方法的名称错误，CSS只是设置样式的一种方法，不一定代表元素样式属性的实际值。

— 罗布
source
2

2020年

使用前检查

您可以使用computedStyleMap（）

答案是正确的，但有时您需要检查它返回的单位，而无需返回任何单位slice()或substring()字符串。

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>
展开摘要

— 尼沙格·沙（Nisharg Shah）
source
1

为了安全起见，您可能希望在尝试读取元素之前先检查该元素是否存在。如果不存在，则您的代码将引发异常，这将停止在其余JavaScript上执行，并可能向用户显示错误消息-不好。您希望能够优雅地失败。

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}
— 布莱恩·H
source
5
除非您真的希望该节点可能不在DOM中，否则这是一个坏主意。在不希望出现null的情况下进行盲null检查可能会给您带来无错误的外观，但更有可能隐藏了错误。如果您希望该节点在那儿，请不要为该节点不在那儿编写代码，否则将发生错误，以便您可以修复代码。该答案与问题本身无关，并且由于它更多是（不好的）建议，因此应为注释。
— Juan Mendes 2012年
2
谢谢你的评论。我这样做是因为我倾向于防守方面的发展。问题是：您如何在用户计算机上看到错误？请记住，在您的计算机上适合您的内容可能不适用于其他人（不同的浏览器和操作系统，影响页面行为的插件，各种其他功能已关闭等）。关键是让它正常地失败，以便页面仍然执行与预期目的相似的操作，而不是向用户弹出无用的错误。
— BryanH 2012年
@BryanH有一个浏览器错误，它没有呈现ID为“ image_1”的元素？;）
— alex 2014年
@alex否。如果没有具有该ID的元素，则OP的代码将失败并显示错误。实例。我的建议是编码，这样就永远不会发生。
— BryanH 2015年
0

上面给出的没有DOM操作的跨浏览器解决方案不起作用，因为它给出了第一个匹配规则，而不是最后一个匹配规则。最后一个匹配规则是适用的规则。这是一个工作版本：

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

但是，这种简单的搜索在使用复杂的选择器的情况下将不起作用。

— jcdufourd
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.