Class manipulation from script

**Martin Honnen** · Jul 20 '05, 09:17 PM

Re: Class manipulation from script

Harlan Messinger wrote:
[color=blue]
> I know how to change attributes of a given element using Javascript, but can
> you change an attribute for a CSS class with script? Or for a particular
> kind of tag? For example, can you write a single script statement that will
> apply a given padding to all elements of a given class, or put a border
> around all the LIs on a page?[/color]

Mozilla, Netscape 6/7 and IE allow you to manipulate the CSS stylesheets
and their rules e.g. for Mozilla if you have
<style type="text/css">
li { }
</style>
as the only stylesheet in your page then you can script
document.styleS heets[0].cssRules[0].cssPropertyNam e
with Mozilla (and other W3C DOM Level 2 compliant browsers) and
document.styleS heets[0].rules[0].cssPropertyNam e
with IE. A simple example would be

<html>
<head>
<title>Scriptin g CSS stylesheet rules</title>
<style type="text/css">
li { }
</style>
<script type="text/javascript">
function setBorder (borderWidth, borderStyle, borderColor) {
var styleSheet, cssRule;
if (document.style Sheets) {
styleSheet = document.styleS heets[0];
if (styleSheet) {
if (styleSheet.css Rules) {
cssRule = styleSheet.cssR ules[0];
}
else if (styleSheet.rul es) {
cssRule = styleSheet.rule s[0];
}
if (cssRule) {
cssRule.style.b orderWidth = borderWidth;
cssRule.style.b orderStyle = borderStyle;
cssRule.style.b orderColor = borderColor;
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="border: 2px solid green"
onclick="setBor der('2px', 'solid', 'green');">
<ul>
<li>Kibo</li>
<li>Xibo</li>
</ul>
</body>
</html>

If you don't have a stylesheet or no rule the DOM also allows you to add
those (again, IE (with IE specific methods), and Mozilla/Netscape with
W3C DOM methods)):

<html>
<head>
<title>adding CSS rules</title>
<script type="text/javascript">
function addCSSRule (selectorText, declarations) {
var styleSheet;
if (document.style Sheets) {
if (document.style Sheets.length === 0) {
var styleElement;
if (document.creat eElement && (styleElement =
document.create Element('style' ))) {
styleElement.ty pe = 'text/css';
document.getEle mentsByTagName( 'head')[0].appendChild(st yleElement);
styleSheet = styleElement.sh eet;
}
}
if (document.style Sheets.length > 0) {
styleSheet = document.styleS heets[document.styleS heets.length - 1];
if (styleSheet.ins ertRule) {
styleSheet.inse rtRule(
selectorText + ' { ' + declarations + ' }',
styleSheet.cssR ules.length
);
}
else if (styleSheet.add Rule) {
styleSheet.addR ule(selectorTex t, declarations);
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="li {border: 2px solid green; }"
onclick="addCSS Rule('li', 'border: 2px solid green;');">
<input type="button" value="input { font-size: 110%; }"
onclick="addCSS Rule('input', 'font-size: 110%;');">
<ul>
<li>Kibo</li>
<li>Xibo</li>
</ul>
</body>
</html>

Opera 7 has no document.styleS heets support but if you add a style
element then the style rules are applied:

var styleElement = document.create Element('style' );
styleElement.ty pe = 'text/css';
styleElement.ap pendChild(docum ent.createTextN ode('body {
background-color: lightblue; }'));
document.getEle mentsByTagName( 'head')[0].appendChild(st yleElement);

Mozilla also supports that but I think IE doesn't allow the appendChild
on the styleElement object.
--

Martin Honnen

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**Harlan Messinger** · Jul 20 '05, 09:17 PM

Re: Class manipulation from script

Thanks for the detailed example! After I wrote, I found where it was
addressed under CSS2, and it looked like a chunk to assimilate. You saved me
a lot of time.

Class manipulation from script

Class manipulation from script

Comment

Comment