获取CSS属性列表

Question

您好 有没有办法检查哪些CSS属性应用于HTML元素。 我不想要任何浏览器插件。使用javascript，我想获得一个html元素上设置的所有CSS属性的列表。如果那不可能，我总是可以编写100行代码并检查值，如if（$（“div”）。css（“background-color”）。length＆gt; 0）{}，对于每个css属性

Answer 1

根据您的浏览器，您可以使用以下插件或工具（必要时链接）：

• Firefox - Firebug（下载插件，重启并按F12打开）
• 谷歌浏览器，Safari - Webkit Inspector（CTRL + SHIFT +我提出来）
• Opera - Dragonfly （CTRL + SHIFT + I）
• Internet Explorer 5.5-7 - IE Developer Toolbar（按地址栏旁边的图标）
• Internet Explorer 8+ - IE开发者工具（按F12打开）

Answer 2

如上所述，我还建议您使用检查工具作为Firebug，Webkit Inspector和Dragonfly。

但是如果您只需要快速检查CSS属性，就可以创建一个快速脚本。有一些DOM方法和属性变得很方便，比如element.currentStyle和element.getComputedStyle（）。

查看http://blog.stchur.com/2006/06/21/css-computed-style/

干杯。

Answer 3

您可能需要更精细一些。但目前Firebug似乎符合您的描述。

Answer 4

使用javascript：

Object.keys(document.getElementsByTagName('HTML')[0].style).join(',')

该指令将列出所有CSS属性：

检查是否应用了css属性：使用以下函数：

String.prototype.isCssProp=function(hTMLElement){
  if(hTMLElement instanceof HTMLElement){
        var all=','+Object.keys(hTMLElement.style).join(',')+',';
          if(all.indexOf(','+this+',')===-1){
              return false;
          }else{
               return true
           }
    }else{
       return false;
    }

}

然后，使用它：

var hTMLELement=document.getElementById('myid');
"color".isCssProp(hTMLELement);
"background-color".isCssProp(hTMLELement);