Jquery CSS Plugin That Returns Computed Style of Element to Pseudo Clone That Element

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

Hope that helps.

Getting all the style properties using JQuery. Basically I want an equivalent of getComputedStyle() and I dont want to handle cross-browser stuff

Well, there is a soultion for a similiar problem offered by Keith Bentrup: jQuery CSS plugin that returns computed style of element to pseudo clone that element?

He used a list of attributes from Firebug and created a computed style object with jQuery to be able to clone styles from one object to another:

jQuery.fn.css2 = jQuery.fn.css;
jQuery.fn.css = function() {
    if (arguments.length) return jQuery.fn.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]] = jQuery.fn.css2.call(this, attr[i]);
    return obj;
}

This seems to do exactly what you are looking for.

There are also a couple of plugins for that:

1. http://github.com/peol/jquery-computed-style
2. http://www.jupiterit.com/news/get-multiple-computed-styles-fast-with-the-curstyles-jquery-plugin

How to get the computed style of the current element

Use following statement to get css of any element

document.getElementById(elementid).style.property

example:
document.getElementById("ospy_class").style.color

add css to a pseudo element of jQuery object that already stored in variable

You don't return the element from the clNumberField function, so num_fld in your ready handler will be underfined.

Add a return statement at the end of the function:

function clNumberField(opts) {
  var numberField = $("<input>", opts);
  numberField.keydown(function (e) {
           /*some method to make sure that only digits are input
            i have it in place and this one works*/
  });
  return numberField;
}

Then, what you are trying to do in the setLabel function is not possible. You can't use the :before pseudo class in an inline style, you need to use it in a style sheet. For example putting this in your style sheet:

.InputLabel:before { content: 'Here goes only numbers' }

Then add that class to the element:

function setLabel(inptFld){
  inptFld.addClass("InputLabel");
}

copy CSS styles that apply to an element

If you're on Chrome, you can use getMatchedCSSRules(element). If you're on FireFox (or another Gecko browser), a polyfill is available.

Adding pseudo element CSS via jquery to specific id is being applied to other th element as well

You're appending the following:

<style>::before{le ....

This is going to select all the elements and add a ::before pseudo element to every element present in the DOM that can have a ::before pseudo element. What you can do is:

$("#fp_sort_col_" + idx).append(
  "<style>#fp_sort_col_" + idx + "::before{left:" +
    leftPos +
    "px !important;right: auto !important;}#fp_sort_col_" + idx + "::after{left:" +
    rightPos +
    "px !important;right: auto !important;}</style>"
);

How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?

I've actually found a solution using this very handy jQuery library: https://github.com/f0r4y312/jquery-stylesheet

I can now loop through each stylesheet and the declaration and return:

var key is a loop through the css property names
$.stylesheet("." + key + "").rules()[0].style

Which then returns all the style properties:

0 "color" "rgb(255, 0, 0)"
1 "background-color" "rgb(0, 255, 0)"
etc

Which I'm now serialising into a json array for a unit test!

Thanks for all your very helpful replies!

---

Related Topics