Forum Moderators: open
.class {
width: 100px;
}
So in a js script on the current page, I want to set:
var x = 100 [or whatever the CSS file says]
<html>
<head>
<style type="text/css">
#test
{
width: 100%;
}.hello
{
color: green;
}
</style>
<script type="text/javascript">function getCSSRule(selectorText, iSheet)
{
var sheets = document.styleSheets;
/* Stop, if unsupported(*) */
if(!sheets) return;
/* If no sheet specified, use last sheet */
var sheet = sheets[ isNaN(iSheet)? sheets.length-1 : iSheet];
/* Get rules collection ( W3C¦¦IE )
var rules = sheet.cssRules¦¦sheet.rules;
/* Search for selector with matching text*/
for(var k=-1, rule; rule=rules[++k];)
if(rule.selectorText == selectorText)
return rule;
}var myRule = getCSSRule(".hello")
/*
Once reference to rule has been gained,
its style object can be treated in the same way
as an element style object.
- it is Read/Write
*/
if(myRule)
alert( myRule.style.color )
</script></head>
<body>HELLO
</body>
</html>
(*)Opera doesn't support this yet.
1) Does it access an EXTERNAL style sheet? That's what I need.
2) If so, is the style sheet supposed to be named 'styleSheets.css'?
3) Does it look for the style sheet in my root directory? That's what I need.
4) Any other customization I need to do (other than fixing the pipes)?
<link rel="stylesheet" href="css/stuff.css" type="text/css">
<style type="text/css">
#test{color:red;}
</style>
<link rel="stylesheet" href="things.css" type="text/css">
That's document.styleSheets[0] ,[1] and [2]
2) Can be "called" anything, or be inline.
3) Any stylesheet
4) When you call the function, if you don't specify the index of the sheet required (source order), then the last sheet is searched. If there's only one sheet, that is the last, and will be searched.
The function will only be able to detect the stylesheets that appear in the code above the execution call.
var sheets = document.styleSheets[0];
It has no effect on the text (I know my CSS is okay because when I assign it directly, not through your script, it modifies the text).
Even when I copy your script as is, with the inline style last in line above the script, and no stylesheet index assigned, it doesn't work. Did you test it in IE?
I don't need to edit anything in these lines, do I?:
for(var k=-1, rule; rule=rules[++k];)
if(rule.selectorText == selectorText)
/* Get rules collection ( W3C¦¦IE ) [red]*/[/red]After that amendment it works. If you're still having trouble, post the code you are using (but remove all the irrelevant stuff)
<html>
<head>
<link rel="stylesheet" href="/TEST/styletest.css" type="text/css" media="all">
<style type="text/css">
.hello
{ color: green; }
</style>
<script type="text/javascript">
function getCSSRule(selectorText, iSheet)
{
var sheets = document.styleSheets;
if(!sheets) return;
var sheet = sheets[ isNaN(iSheet)? sheets.length-1 : iSheet];
var rules = sheet.cssRules¦¦sheet.rules;
for(var k=-1, rule; rule=rules[++k];)
if(rule.selectorText == selectorText)
return rule;
}
var myRule = getCSSRule(".hello")
if(myRule)
alert( myRule.style.color )
</script>
</head>
<body>
HELLO
<br><br>
<font CLASS="hello">TEST</font>
</body>
</html>
I take it this is supposed to give an alert message indicating my CSS rule, correct? Is the 'HELLO' in <body> supposed to conform to the CSS too? I get neither. ('TEST' does conform to CSS class .hello)
I tested this using 3 different lines:
var sheets = document.styleSheets;
var sheets = document.styleSheets[0];
var sheets = document.styleSheets[1];
The call,
getCSSRule(".hello").helloalert(myRule.style.color)Is the 'HELLO' in <body> supposed to conform to the CSS too? I get neither. ('TEST' does conform to CSS class .hello)
As you have it, yes. However, the page doesn't need any actual body content at all. I suppose I put "HELLO" in there just for the sake of it.
I tested this using 3 different lines: ...
Only this one will work:
var sheets = document.styleSheets; The others will produce errors, unless the function's code is amended slightly.
I can't see why it's not working for you, but you could try some of your own investigation. The first step is always to drag an alert through the function to see if the function is being called, and, if it is, where it is tripping up.
Better, in fact, to start by putting an alert at the top of the script block (
alert(1)
I tweaked it a bit to fit my needs -- I want to set a variable = to the 'width' spec of CSS class 'images'. Here's what I did (seems to work, but let me know if you see something off):
[last part of the script, in place of the alert ]:
var myRule = getCSSRule(".images")
/* if(myRule) */
var setwidth = ( myRule.style.width )
Do I need 'if(myRule)'? Seems to work even when I comment it out.
Last thing -- I'm confused about specifying a stylesheet other than the default (last one). Where exactly do I indicate the index [0], [1], [2], etc.?
Oh...how do I tweak the following to give a default value to my variable if it doesn't find the stylesheet?
var sheets = document.styleSheets;
if(!sheets) return;
Do I need 'if(myRule)'? Seems to work even when I comment it out.
It's just there to prevent errors. If you try to get a rule that doesn't exist..
myRule = getCSSRule("#idonot > .exist")then this below will produce an error, because
myRuleundefinedalert(myRule.style.color)I'm confused about specifying a stylesheet other than the default (last one). Where exactly do I indicate the index [0], [1], [2], etc.?
myRule = getCSSRule(".hello", 0)..Specifying the first stylesheet.
The function would be improved by an ability to search all the stylesheets (in reverse order) for the specified rule. I haven't got there yet.
Oh...how do I tweak the following to give a default value to my variable if it doesn't find the stylesheet?var sheets = document.styleSheets;
if(!sheets) return;
Not sure what you mean there. The quoted code snippet is there, again, to prevent error. If the browser doesn't have a defined
document.styleSheets
if(!sheets)
var setwidth = 100
return;
But that doesn't work. So I just did this at the end:
var myRule = getCSSRule(".images", 1)
if(myRule)
var setwidth = ( myRule.style.width )
else
var setwidth = 100
Seems to work. I think that does it -- thanks very much for all your help.
