Class manipulation from script
Harlan Messinger
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?
--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.
Martin Honnen
Harlan Messinger wrote:
> 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?
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.styleSheets[0].cssRules[0].cssPropertyName
with Mozilla (and other W3C DOM Level 2 compliant browsers) and
document.styleSheets[0].rules[0].cssPropertyName
with IE. A simple example would be
<html>
<head>
<title>Scripting CSS stylesheet rules</title>
<style type="text/css">
li { }
</style>
<script type="text/javascript">
function setBorder (borderWidth, borderStyle, borderColor) {
var styleSheet, cssRule;
if (document.styleSheets) {
styleSheet = document.styleSheets[0];
if (styleSheet) {
if (styleSheet.cssRules) {
cssRule = styleSheet.cssRules[0];
}
else if (styleSheet.rules) {
cssRule = styleSheet.rules[0];
}
if (cssRule) {
cssRule.style.borderWidth = borderWidth;
cssRule.style.borderStyle = borderStyle;
cssRule.style.borderColor = borderColor;
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="border: 2px solid green"
onclick="setBorder('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.styleSheets) {
if (document.styleSheets.length === 0) {
var styleElement;
if (document.createElement && (styleElement =
document.createElement('style'))) {
styleElement.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(styleElement);
styleSheet = styleElement.sheet;
}
}
if (document.styleSheets.length > 0) {
styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (styleSheet.insertRule) {
styleSheet.insertRule(
selectorText + ' { ' + declarations + ' }',
styleSheet.cssRules.length
);
}
else if (styleSheet.addRule) {
styleSheet.addRule(selectorText, declarations);
}
}
}
}
</script>
</head>
<body>
<p>
<input type="button" value="li {border: 2px solid green; }"
onclick="addCSSRule('li', 'border: 2px solid green;');">
<input type="button" value="input { font-size: 110%; }"
onclick="addCSSRule('input', 'font-size: 110%;');">
<ul>
<li>Kibo</li>
<li>Xibo</li>
</ul>
</body>
</html>
Opera 7 has no document.styleSheets support but if you add a style
element then the style rules are applied:
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.appendChild(document.createTextNode('body {
background-color: lightblue; }'));
document.getElementsByTagName('head')[0].appendChild(styleElement);
Mozilla also supports that but I think IE doesn't allow the appendChild
on the styleElement object.
--
Martin Honnen
http://JavaScript.FAQTs.com/
Harlan Messinger
addressed under CSS2, and it looked like a chunk to assimilate. You saved me
a lot of time.