Databases
StackOverflow2013
Postsdbo
POjQuery CSS plugin that returns computed style of element to pseudo clone that element?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery CSS plugin that returns computed style of element to pseudo clone that element?
    text
    copied!<p>I'm looking for a way using jQuery to return an object of computed styles for the 1st matched element. I could then pass this object to another call of jQuery's css method.</p> <p>For example, with <a href="http://docs.jquery.com/CSS/width" rel="noreferrer">width</a>, I can do the following to make the 2 divs have the same width:</p> <pre><code>$('#div2').width($('#div1').width()); </code></pre> <p>It would be nice if I could <strong>make a text input look like an existing span</strong>:</p> <pre><code>$('#input1').css($('#span1').css()); </code></pre> <p>where .css() with no argument returns an object that can be passed to <a href="http://docs.jquery.com/CSS/css#properties" rel="noreferrer">.css(obj)</a>.</p> <p>(I can't find a jQuery plugin for this, but it seems like it should exist. If it doesn't exist, I'll turn mine below into a plugin and post it with all the properties that I use.) </p> <p>Basically, I want to pseudo clone certain elements <strong>but use a different tag</strong>. For example, I have an li element that I want to hide and put an input element over it that looks the same. When the user types, <strong>it looks like they are editing the element inline</strong>.</p> <p><strong>I'm also open to other approaches for this pseudo cloning problem for editing.</strong> Any suggestions?</p> <p>Here's what I currently have. The only problem is just getting all the possible styles. This could be a ridiculously long list.</p> <hr> <pre><code>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 &lt; len; i++) obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]); return obj; } </code></pre> <p>Edit: I've now been using the code above for awhile. It works well and behaves exactly like the original css method with one exception: if 0 args are passed, it returns the computed style object. </p> <p>As you can see, it immediately calls the original css method if that's the case that applies. Otherwise, it gets the computed styles of all the listed properties (gathered from Firebug's computed style list). Although it's getting a long list of values, it's quite fast. Hope it's useful to others.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload