如何在javascript中获取HTML元素的样式值？ [英] How to get an HTML element's style values in javascript?

问题描述

我正在寻找一种从样式标签中设置样式的元素检索样式的方法。

 < style> 
 #box {width：100px;} 
< / style> 
  

在正文中

 < div id =box>< / div> 
  

我在寻找不使用库的直接javascript。

我试过下面的，但保持空白：

  alert（document.getElementById（ ）.style.width）; 
 alert（document.getElementById（box）。style.getPropertyValue（width））; 
  

我注意到，我只能使用上面的如果我使用javascript设置样式，但无法使用样式标签。

解决方案

element.style 属性可让您仅知道定义为 inline 。 $ 不是那么容易以跨浏览器的方式做，IE有自己的方式，通过 element.currentStyle 属性和DOM级别2 标准方式，由其他浏览器实现是通过 document.defaultView.getComputedStyle 方法。

示例，IE element.currentStyle 属性期望您访问由 camelCase 中的两个或更多个字组成的CCS属性名称（例如 maxHeight ， fontSize ， backgroundColor 等）方式期望具有以破折号分隔的单词的属性（例如 max-height ， font-size ， background-color 等）。

此外，IE element.currentStyle 将返回它们指定的单位中的所有尺寸（例如12pt，50％，5em），标准方式将以像素为单位计算实际尺寸。

我之前做了一个跨浏览器的函数，它允许你以跨浏览器的方式获取计算的样式：

  function getStyle（el，styleProp）{
 var value，defaultView =（el.ownerDocument || document）.defaultView; 
 // W3C标准方式：
 if（defaultView&& defaultView.getComputedStyle）{
 //将属性名称清除为css符号
 // font-Size）
 styleProp = styleProp.replace（/（[AZ]）/ g， -  $ 1）toLowerCase 
 return defaultView.getComputedStyle（el，null）.getPropertyValue（styleProp）; 
} else if（el.currentStyle）{// IE 
 //清理属性名称到camelCase 
 styleProp = styleProp.replace（/ \-（\w）/ g，function （str，letter）{
 return letter.toUpperCase（）; 
}）; 
 value = el.currentStyle [styleProp]; 
 //将其他单位转换为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）; 
} 
返回值; 
} 
} 
  

上述函数在某些情况下不完美，示例的颜色，标准方法将返回颜色在 rgb（...）符号，在IE上，他们会返回它们，因为他们被定义。

我目前正在处理主题中的文章，您可以按照我对此功能所做的更改此处。

I am looking for a way to retrieve the style from an element that has a style set upon it by the style tag.

<style> 
#box {width: 100px;}
</style>

In the body

<div id="box"></div>

I'm looking for straight javascript without the use of libraries.

I tried the following, but keep receiving blanks:

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

I noticed that I'm only able to use the above if I have set the style using javascript, but unable to with the style tags.

解决方案

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 CCS 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).

Also, the IE element.currentStyle will return all the sizes in the unit that they were specified, (e.g. 12pt, 50%, 5em), the standard way will compute the actual size in pixels always.

I made some time ago a cross-browser function that allows you to get the computed styles in a cross-browser way:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen 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;
  }
}

The above function is not perfect for some cases, for example for colors, the standard method will return colors in the rgb(...) notation, on IE they will return them as they were defined.

I'm currently working on an article in the subject, you can follow the changes I make to this function here.

这篇关于如何在javascript中获取HTML元素的样式值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！