Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can jQuery modify the CSS for a specific media type?

Is it possible for jQuery to modify the CSS for a specific media type (e.g. print)?

My specific problem is that I'm using animate on an element and it's overriding the print stylesheet, which ruins my print layout. Though my problem is slightly different than the general question posed, I think an answer should help me resolve my problem. Any possible workarounds would be helpful also. Much obliged.

like image 922
Perishable Dave Avatar asked Feb 07 '11 21:02

Perishable Dave


People also ask

Can we change CSS property value using Javascript or jQuery?

You can change CSS using the jQuery css() method which is used for the purpose of getting or setting style properties of an element. Using this method you can apply multiple styles to an HTML all at once by manipulating CSS style properties.

What is the use of CSS () method in jQuery?

jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.

How do I retrieve the properties of a CSS element?

The attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element's originating element is returned.


1 Answers

You don't need to do this with Javascript. Just use the @media rule in your css document. You can write all these stuff in only one css file. Here is the specific W3C Documentation

@media screen {

/* all your fancy screen css with a bunch of animation stuff*/

}

@media print {

/* all your fancy print css just plain */

}

You can write very specific declarations and match all elements to your needs. Btw it's supported down to IE6. Works like a charm in our projects.

@media print {
   body { font-size: 10pt }
}

@media screen {
   body { font-size: 13px }
}

@media screen, print {
   body { line-height: 1.2 }
}
like image 151
gearsdigital Avatar answered Nov 10 '22 01:11

gearsdigital