使用JavaScript获取CSS值_Javascript_Css

使用JavaScript获取CSS值

javascript css

使用JavaScript获取CSS值,javascript,css,Javascript,Css,我知道我可以通过JavaScript设置CSS值，例如： document.getElementById('image_1').style.top = '100px'; 但是，我可以获得当前特定的样式值吗？我已经阅读了可以获取元素的整个样式的地方，但是如果不需要，我不想解析整个字符串。您可以使用。否则，您可以始终使用jQuery： <html> <body> <div id="test" style="height: 100px;">

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

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

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

您可以使用

。否则，您可以始终使用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>


试验
警报（$（“#测试”）.css（“高度”）；

出于安全考虑，在尝试读取元素之前，您可能希望检查元素是否存在。如果它不存在，您的代码将抛出一个异常，该异常将停止对其余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
}

如果你喜欢图书馆，为什么不呢

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

使用以下方法。它帮助了我

document.getElementById('image_1').offsetTop

另请参见。

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

以跨浏览器的方式实现这一点并不容易，IE有自己的方式，通过element.currentStyle属性，而由其他浏览器实现的DOM Level 2标准方式是通过document.defaultView.getComputedStyle方法

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

无需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];
   }
  }
 }
};

净化版本（强制选择器输入为小写，并允许不带“.”前导的用例）

函数获取样式规则值（选择器，样式）
{
var selector_compare=selector.toLowerCase（）；
变量选择器\u compare2=选择器\u compare.substr（0,1）=='。？选择器\u compare.substr（1）：'。+选择器\u compare；
for（var i=0；i

上面给出的没有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;
}

函数getStyleRuleValue（样式，选择器）{
设value=null；
for（设i=0；i


但是，对于复杂的选择器，这种简单的搜索将不起作用。
2020年
使用前
你可以用
答案是有效的，但有时您需要检查它返回的单位，您可以在不使用任何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{
宽度：10雷姆；
高度：10雷姆；
背景色：天蓝色；
左侧填充：10px；
}
您试图获得什么“特定样式值”？当前定位值：高度、宽度、顶部、边距等。您的问题让人相信您需要类似var top=document.getElementById（'image_1'）的内容.style.top；如果这不是您想要的，可能需要对其进行重新表述。总之，这两种方法都能很好地工作，这正是我所需要的。Jquery方法更紧凑一些，所以我可能会使用它。我认为您的Jquery示例不是很清楚（或正确）.style属性返回所有样式内联应用于元素，不由css规则定义。例如，如果要更改div的背景颜色，请小心不要使用“backgroundColor”而不是“background color”；）slw是首字母缩写词还是表示缓慢？IE 8及以下版本不支持getComputedStyle。有些离题：部分（全部？）在JavaScript中无法访问。例如，你可以得到左边的填充物，但不能得到左边的填充物@DavidWiniecki，我真的不相信WebDeVS仍然应该把IE8看作主流浏览器。考虑到微软不再支持它，这是一个坏主意，除非你真的认为这个节点可能不在DOM中。如果不需要空值，则盲空检查可能会让您看起来没有错误，但更可能是隐藏了错误。如果您希望节点在那里，不要为它不在那里而编码，让错误发生，这样您就可以修复代码。这个答案与问题本身无关，因为它更多的是一个（不好的）建议，所以应该是一个评论。谢谢你的评论。我这样做是因为我倾向于发展防守。问题是：您如何看待用户机器上的错误？记住，在你的机器上对你有用的东西可能对其他人不起作用（不同的浏览器和操作系统，影响页面行为的插件，各种其他关闭的东西，等等）。关键是要有它
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];
     }
    }
   }
  }
 }

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

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