...

View Full Version : insertRule from select



oztinks
04-30-2004, 09:48 AM
Hi,
My script adds rules to Css but I don't know how to make it use the value of the select box which triggers the event?

Any help appreciated



<html>
<head>
<title></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>

<form>
font Size<select name="size" onclick="addCSSRule('div', 'font-size: (this:value);');">
<option value="12px" SELECTED>12px</option>
<option value="15px">15px</option>
<option value="20px">20px</option>
<option value="25px">25px</option>
</select></form>

<div>this div</div>
</body>
</html>

Willy Duitt
04-30-2004, 10:15 AM
<select name="size" onclick="addCSSRule('div', 'font-size:'+this.value)">

.....Willy

glenngv
04-30-2004, 10:52 AM
<select name="size" onchange="addCSSRule('div', 'font-size:'+this.options[this.selectedIndex].value)">

Willy Duitt
04-30-2004, 10:56 AM
Oops;

I didn't realize this.value was not cross-browser. :eek:

.....Willy

oztinks
05-01-2004, 12:11 AM
Thanks guys that did the trick :thumbsup:

fredmv
05-01-2004, 02:50 AM
I didn't realize this.value was not cross-browser.It is, however, not quite so in the case of <select> elements. Older browsers (e.g., Netscape 4.x) will not obtain the value correctly unless you use the notation Glenn has demonstrated. Glenn also pointed out that the event you want to be listening for is the onchange event, as opposed to onclick.

Antoniohawk
05-01-2004, 04:48 AM
@Willy Duitt
Lol, I figured out that myself when attempting to use it on that javascript you were helping me with. If you read this, go find my post again, I need more help :D

oztinks
05-01-2004, 09:22 AM
And thanks again :D
I was wondering why my text box using onblur wasn't working guess I should have noticed the this.selectedIndex :rolleyes:

oztinks
05-02-2004, 06:13 AM
Another IE handicap
With firefox I can add multiple Css selectors
onchange="addCSSRule('body, td', 'font-size:'+this.options[this.selectedIndex].value)"

but if you use more than 1 with IE it won't execute the script

Now I have a sig
;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum