Getting list of CSS properties

Hi Is there a way to check what CSS properties are applied to an HTML Element. I dont want any browser plugin. Using javascript, I want to get a list of all CSS 开发者_JAVA百科properties set on an html element. If thats not possible, I can always write 100 lines of code and checking the value like if($("div").css("background-color").length > 0){}, for each and every css property.

As mentioned, I also recommend you using inspecting tools as Firebug, Webkit Inspector and Dragonfly.

But if you need just a quick check on CSS properties, you can create a quick script. There are some DOM methods and properties that becomes handy, like element.currentStyle and element.getComputedStyle().

Check this out http://blog.stchur.com/2006/06/21/css-computed-style/

Cheers.

Depending on your browser, you can use the following plugins or tools (linked where necessary):

• Firefox - Firebug (download the addon, restart and press F12 to open)
• Google Chrome, Safari - Webkit Inspector (CTRL+SHIFT+I to bring it up)
• Opera - Dragonfly (CTRL+SHIFT+I)
• Internet Explorer 5.5-7 - IE Developer Toolbar (press the icon near your address bar)
• Internet Explorer 8+ - IE Developer Tools (press F12 to open)

You might need to be a bit more elaborate. But for now Firebug seems to fit your description.

Using javascript :

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

This instruction will list all CSS properties :

To check if a css property is applied : Use the following function :

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

}

And then , use it :

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