jQuery add css without being in html

Question

I want to add css styles with jQuery, but not be in in the html when I print out html(). Example:

$('#wat').css("cursor", "pointer");

$('#ok').click(function() {

var str = $("#wat").html();

$("#html").text(str);

});

when it prints out the html, inside the element with the ID of "wat", it has style="cursor: pointer;

Is there a way to add the css without being in the html? thanks

Answer 1

@David, not really. I think what you might want to do is have a print.css file that you can apply when printing which turns off all the stuff you don't want during a print.

Generally speaking if you have a print.css file and you tell the browser that that is the css to use when printing, it'll handle the rest automatically during a print.

So in your main css youd have a cursor style and in your print you'd have a cursor style where you set a different style type.

Answer 2

Given this HTML structure:

<div id="something">
    <div id="else">
    </div>
</div>

You could conceivably do this:

$('<style></style>').appendTo('head').text('#something { cursor: pointer; }');

Or

$('#something').clone().children().removeAttr('style').parent().html();

For the last one, note that since html() gets the innerHTML of the element, you need to call it on the parent to obtain the HTML of the element inside it.

Neither of these solution are particularly clean or satisfactory. Maybe you'd want to consider an alternative to what you're doing?