I was wondering if it is possible to replace lets say a div with a span (which i can do) but pass on all the declared css from that element to the new?
regards,
3 Answers
If you add the classes,id and style attribute it should be fine..
var div = $('yourdivid');
var span = $('<span>',{
id:div.attr('id'),
html:div.html(),
class:div.attr('class'),
style:div.attr('style')
});
div.replaceWith(span);
demo at http://jsfiddle.net/gaby/KQdGX/
Be aware though that styles that are applied through CSS rules that target the tag div will not be reproduced..
2 Comments
Phil Jackson
this will not work. div { foo:bar; } will not get passed to the new span that it is being replaced with. I was hoping for something along the lines of var passCss = $(oldEl).css();
Gabriele Petrioli
@Phil, also what about the case where there is also a rule of
span {foo:bar!important;}. Should the span rule apply or the div one ?Why not use .style of the DOM element? It's an object which contains members such as width and backgroundColor.
document.getElementById("id").style.property="value"
Or use this code Made by Dakota
Warning: This code generates a lot of output, and should be used sparingly. It not only copies all standard CSS properties, but also all vendor CSS properties for that browser.
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])/, 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
Comments
i had same problem, i tweaked n got this working :
document.getElementById("destinationid").style.height = document.getElementById('sourceid').offsetHeight+"px"
divwith.myClass { /* stuff here */ }, and then replace<div class="myClass">with<span class="myClass">. Problem solved..