Get All CSS Styles for a Dom Element (A La Firebug)

How can I get list of all element css attributes with jQuery?

Copying the source from SO1004475 - jQuery CSS plugin that returns computed style of element to pseudo clone that element? - Please follow link and upvote there if you find it useful.

It seems ridiculous, but this is probably your best option - makes .css() with no arguments get an object with all this stuff set.

jQuery.fn.css = (function(css2) { 
    return function() {
        if (arguments.length) { return css2.apply(this, arguments); }
        var attr = ['font-family','font-size','font-weight','font-style','color',
            'text-transform','text-decoration','letter-spacing','word-spacing',
            'line-height','text-align','vertical-align','direction','background-color',
            'background-image','background-repeat','background-position',
            'background-attachment','opacity','width','height','top','right','bottom',
            'left','margin-top','margin-right','margin-bottom','margin-left',
            'padding-top','padding-right','padding-bottom','padding-left',
            'border-top-width','border-right-width','border-bottom-width',
            'border-left-width','border-top-color','border-right-color',
            'border-bottom-color','border-left-color','border-top-style',
            'border-right-style','border-bottom-style','border-left-style','position',
            'display','visibility','z-index','overflow-x','overflow-y','white-space',
            'clip','float','clear','cursor','list-style-image','list-style-position',
            'list-style-type','marker-offset'];
        var len = attr.length, obj = {};
        for (var i = 0; i < len; i++) {
            obj[attr[i]] = css2.call(this, attr[i]);
        }
        return obj;
    };
})(jQuery.fn.css);

Note that this doesn't capture all possible CSS properties, particularly new ones for CSS3. Here is a list of all standard CSS and stable CSS3 properties, and here's one of hyphen-prefixed vendor-specific properties (such as -moz-border-start). If you really want all of them, you can glean them from there.

How to convert an element css to JSON?

If you are okay with using a plugin for your task, try this plugin : https://github.com/reworkcss/css-parse

Demo:http://bililite.com/blog/blogfiles/cssparser/cssparsertest.php

Example:
CSS:

body {background: #eee;color: #888;}

Output:

{
    "type": "stylesheet",
        "stylesheet": {
        "rules": [{
            "type": "rule",
                "selectors": [
                "body"],
                "declarations": [{
                "type": "declaration",
                    "property": "background",
                    "value": "#eee"
            }, {
                "type": "declaration",
                    "property": "color",
                    "value": "#888"
            }]
        }]
    }
}

jQuery CSS plugin that returns computed style of element to pseudo clone that element?

Two years late, but I have the solution you're looking for. Here's a plugin I wrote (by wrapping another guy's function in plugin format) which does exactly what you want, but gets all possible styles in all browsers, even IE.

jquery.getStyleObject.js:

/*
 * getStyleObject Plugin for jQuery JavaScript Library
 * From: http://upshots.org/?p=112
 *
 * Copyright: Unknown, see source link
 * Plugin version by Dakota Schneider (http://hackthetruth.org)
 */

(function($){
    $.fn.getStyleObject = function(){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            }
            style = window.getComputedStyle(dom, null);
            for(var i=0;i<style.length;i++){
                var prop = style[i];
                var camel = prop.replace(/\-([a-z])/g, camelize);
                var val = style.getPropertyValue(prop);
                returns[camel] = val;
            }
            return returns;
        }
        if(dom.currentStyle){
            style = dom.currentStyle;
            for(var prop in style){
                returns[prop] = style[prop];
            }
            return returns;
        }
        return this.css();
    }
})(jQuery);

Basic usage is pretty simple:

var style = $("#original").getStyleObject(); // copy all computed CSS properties
$("#original").clone() // clone the object
    .parent() // select it's parent
    .appendTo() // append the cloned object to the parent, after the original
                // (though this could really be anywhere and ought to be somewhere
                // else to show that the styles aren't just inherited again
    .css(style); // apply cloned styles

Why does my XPath query (scraping HTML tables) only work in Firebug, but not the application I'm developing?

The Problem: DOM Requires <tbody/> Tags

Firebug, Chrome's Developer Tool, XPath functions in JavaScript and others work on the DOM, not the basic HTML source code.

The DOM for HTML requires that all table rows not contained in a table header of footer (<thead/>, <tfoot/>) are included in table body tags <tbody/>. Thus, browsers add this tag if it's missing while parsing (X)HTML. For example, Microsoft's DOM documentation says

The tbody element is exposed for all tables, even if the table does not explicitly define a tbody element.

There is an in-depth explanation in another answer on stackoverflow.

On the other hand, HTML does not necessarily require that tag to be used:

The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections.

Most XPath Processors Work on raw XML

Excluding JavaScript, most XPath processors work on raw XML, not the DOM, thus do not add <tbody/> tags. Also HTML parser libraries like tag-soup and htmltidy only output XHTML, not "DOM-HTML".

This is a common problem posted on Stackoverflow for PHP, Ruby, Python, Java, C#, Google Docs (Spreadsheets) and lots of others. Selenium runs inside the browser and works on the DOM -- so it is not affected!

Reproducing the Issue

Compare the source shown by Firebug (or Chrome's Dev Tools) with the one you get by right-clicking and selecting "Show Page Source" (or whatever it's called in your browsers) -- or by using curl http://your.example.org on the command line. Latter will probably not contain any <tbody/> elements (they're rarely used), Firebug will always show them.

---

Solution 1: Remove /tbody Axis Step

Check if the table you're stuck at really does not contain a <tbody/> element (see last paragraph). If it does, you've probably got another kind of problem.

Now remove the /tbody axis step, so your query will look like

//table[@id="example"]/tr[2]/td[1]

Solution 2: Skip <tbody/> Tags

This is a rather dirty solution and likely to fail for nested tables (can jump into inner tables). I would only recommend to to this in very rare cases.

Replace the /tbody axis step by a descendant-or-self step:

//table[@id="example"]//tr[2]/td[1]

Solution 3: Allow Both Input With and Without <tbody/> Tags

If you're not sure in advance that your table or use the query in both "HTML source" and DOM context; and don't want/cannot use the hack from solution 2, provide an alternative query (for XPath 1.0) or use an "optional" axis step (XPath 2.0 and higher).

• XPath 1.0:
  
  //table[@id="example"]/tr[2]/td[1] | //table[@id="example"]/tbody/tr[2]/td[1]
• XPath 2.0: //table[@id="example"]/(tbody, .)/tr[2]/td[1]

How to disable CSS in Browser for testing purposes

The Web Developer plugin for Firefox and Chrome is able to do this

Once you have installed the plugin the option is available in the CSS menu. For example, CSS > Disable Styles > Disable All Styles

Alternatively with the developer toolbar enabled you can press Alt+Shift+A.

Make a DIV fill an entire table cell

The following code works on IE 8, IE 8's IE 7 compatibility mode, and Chrome (not tested elsewhere):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

You said in your original question that setting width and height to 100% didn't work, though, which makes me suspect that there is some other rule overriding it. Did you check the computed style in Chrome or Firebug to see if the width/height rules were really being applied?

Edit

How foolish I am! The div was sizing to the text, not to the td. You can fix this on Chrome by making the div display:inline-block, but it doesn't work on IE. That's proving trickier...

2 different css files one page, browser applying only style from one file

All the rules from the downloaded file that affect the .tile class start like this .metro .tile which means that the .tile element must be a descendant of a .metro element (an element with class metro)

You html does not show your link being inside a .metro element so the styles do not apply ..

---

Related Topics