Geek Answers Handbook

How to remove inherited styles using jQuery?

Hi guys, I have a DIV that I received the passed js function:

function print(divId) { var det = document.getElementById(divId); $(divId).removeClass(); .. $(divId).removeAttr(); .. var mywindow = window.open(' ', 'Print'); mywindow.document.write('<html><head><title>Account Detail</title>'); mywindow.document.write('<link href="../../css/reset-min.css" rel="stylesheet" type="text/css" />'); mywindow.document.write('</head><body>'); mywindow.document.write(det.innerHTML); mywindow.document.write('</body></html>'); }

I tried some jQuery functions, as shown above, the purchase does not work, because styles are inherited from css templates, so how can I completely remove CSS attributes and styles .. I heard about YUI Reset http://developer.yahoo.com/yui / reset / , but I don’t know how to use it in a new Windows popup

Thanks!

+4
source share
4 answers

Just use .css( jQuery method and don't forget to add! It is important, if necessary, to force an override.

This will effectively set the style=" attribute for the element.

+1
source

Create a CSS class that overrides all inherited properties, and then simply remove all classes from the div and add a css class that overrides everything.

+1
source

I think you will need to clone the node target in order to remove the attributes for each element in it:

 var det = document.getElementById(divId); if (det) { det = det.cloneNode(); $(det).removeAttr("class").removeAttr("style").find("*").each(function(i, elem) { $(elem).removeAttr("class").removeAttr("style"); }); // … }
+1
source

Will it help:

 $("link[rel=stylesheet][class=must-remove-when-printing]").remove();

and

 $("*[class]").removeAttr("class"); $("*[style]").removeAttr("style");
+1
source

More articles:


All Articles