Accessing elements - style media="print" - at runtime

[mintquest]

How do i access in the DOM via Javascript the elements for the
different media types, eg; screen, print, handheld etc. ?

window.document.body.style.* returns just the screen elements.

(I'm trying to programmatically change some of the
document.body.style.* settings for the "print" media style on a loaded
web page in my browser before I print it, the webpages html has
different media types defined, and i need to change some of it in
order to better print it)

 

[RobG]

How do i access in the DOM via Javascript the elements for the
different media types, eg; screen, print, handheld etc. ?

window.document.body.style.* returns just the screen elements.

That will return the style object of the body element, it is not the
CSS style information. What you are after is the document.styleSheets
collection:

<UR:"
http://groups.google.com.au/group/c...nt.styleSheets&rnum=22&hl=en#d586f8abf43a8199
Note that there is a bit of cross-browser code required and that not
all browsers support it, and there are some suggestions on improving
the code in the thread.

(I'm trying to programmatically change some of the
document.body.style.* settings for the "print" media style on a loaded
web page in my browser before I print it, the webpages html has
different media types defined, and i need to change some of it in
order to better print it)

Then access the rules via the stylesheets. You need to sift through
them to find the particular rule you are after, then modify it.

Below is a play function for adding/removing display:none to a
particular class (much faster than finding and hiding elements one at
a time, unless XPath is supported and used):

function toggleByRule( cName ) {

if ( 'undefined' != typeof document.styleSheets ) {
var sheets = document.styleSheets;
var j, i = sheets.length,
s, rtype, rs, r, str;

while ( i-- ) {
s = sheets;

// Determine rule type - IE rules, Moz cssRules
rtype = ( typeof s.rules != 'undefined' )? 'rules' : 'cssRules';

if ( typeof s[rtype] != 'undefined' ) {
rs = s[rtype];
j = rs.length;

while ( j-- ) {
r = rs[j];

if ( '.'+cName == r.selectorText ) {
str = /\bdisplay: none;/i;

if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, '');
} else {
r.style.cssText += '; display: none;';
}
return;
}
}
}
}
}
}

 

[RobG]

though this is all true, the essence of using stylesheets is that the same
freaking markup can be styled in myriad ways according to the particular
media's css

the goal is to design your page to let the stylesheets alone control
everything from formatting to physical layout. add classes like
"printOnly" or "screenOnly" etc to get you started if you must, but
changing the DOM is missing the point IMHO

The OP may wish to offer the user a number of different print options,
which might be achieved by loading a different stylesheet or by
modifying one that is already attached.

It is much simpler to modify a class rule than to go through the
document to find all the elements with a particular class and change
it to something else. Of course once XPath is widely supported, that
may change. It is interesting to see the way CSS-style selectors are
used in libraries like jQuery to select certain elements, rather than
plain DOM methods:

<URL: http://docs.jquery.com/DOM/Traversing/Selectors >

When used with browsers that support XPath, they are very fast (and,
if poorly implemented or unwisely used, can be very, very slow). But
the question will still remain: is it better to change the rule, or
change all the elements with class 'foo' to 'bar'?

I think that must be answered on a case-by-case basis.

 

[Thomas 'PointedEars' Lahn]

That will return the style object of the body element, it is not the
CSS style information. What you are after is the document.styleSheets
collection:

You should get your terminology right. Everything that is CSS code is
"CSS style information" (with `style' being somewhat redundant). In
fact, the "style object of the body element" is implemented as a
CSSStyleDeclaration object (in Geckos). document.styleSheets refers to
a StylesheetList object (in Geckos).

You, on the other hand, are distinguishing between linked stylesheets
(linked stylesheet/CSS resources) and inline stylesheets.

<UR:"
http://groups.google.com.au/group/c...nt.styleSheets&rnum=22&hl=en#d586f8abf43a8199

Uniform Resource ... what? ;-)


Regards,

PointedEars

 

[mintquest]

How do i access in the DOM via Javascript the elements for the
different media types, eg; screen, print, handheld etc. ?

window.document.body.style.* returns just the screen elements.

That will return the style object of the body element, it is not the
CSS style information. What you are after is the document.styleSheets
collection:

<UR:"http://groups.google.com.au/group/comp.lang.javascript/browse_frm/thr...



Note that there is a bit of cross-browser code required and that not
all browsers support it, and there are some suggestions on improving
the code in the thread.

(I'm trying to programmatically change some of the
document.body.style.* settings for the "print" media style on a loaded
web page in my browser before I print it, the webpages html has
different media types defined, and i need to change some of it in
order to better print it)

Then access the rules via the stylesheets. You need to sift through
them to find the particular rule you are after, then modify it.

Below is a play function for adding/removing display:none to a
particular class (much faster than finding and hiding elements one at
a time, unless XPath is supported and used):

function toggleByRule( cName ) {

if ( 'undefined' != typeof document.styleSheets ) {
var sheets = document.styleSheets;
var j, i = sheets.length,
s, rtype, rs, r, str;

while ( i-- ) {
s = sheets;

// Determine rule type - IE rules, Moz cssRules
rtype = ( typeof s.rules != 'undefined' )? 'rules' : 'cssRules';

if ( typeof s[rtype] != 'undefined' ) {
rs = s[rtype];
j = rs.length;

while ( j-- ) {
r = rs[j];

if ( '.'+cName == r.selectorText ) {
str = /\bdisplay: none;/i;

if ( r.style.cssText.match( str ) ) {
r.style.cssText = r.style.cssText.replace( str, '');
} else {
r.style.cssText += '; display: none;';
}
return;
}
}
}
}
}

}

Thanks - that's exactly what i was looking for - appreciate the code
example!