Hi all
Ok so I think I’ve finally figured out to access an internal style sheet find a rule or group of rules within that style sheet and then modify said rule or rules when the change event is triggered.
Note: This should work the same for accessing an external style sheet and then modifying a rule or group of rules when the change event is triggered.
So for the benefit if anyone who might want to do the same here is how.
First get the style sheet you want to access like so
The number in the square bracket represents the index value of the style sheet you want to access the index starts at 0 so index [0] represents the first style sheet index [1] represents the second style sheet and so on
Next you need to get a list of all the rules contained in the style sheet and store that list in a variable so that you can search through it to find the rule or rules that you want to modify so change the above to
Code: Select all
var rules = document.styleSheets[1].cssRules
Next construct a for loop so that you can iterate through the list of rules to find the rule or rules you want to modify you can probably use other types of loops for this but for the sake of simplicity I’m just going to use a for loop
Code: Select all
for (i=0; i < rules.length; i++)
{
// do stuff...
}
Inside the loop construct an if statement to search for the rule or rules you want to modify, if you had a rule like this in your style sheet
Code: Select all
p.warning
{
font-family: Arial;
font-size:1.2em;
color:red;
}
Then the if statement would look like this
Code: Select all
if(rules[i].selectorText == "p.warning")
{
//do stuff...
}
if you want to search for a group of rules then the if statement might look something like this
Code: Select all
if(rules[i].selectorText == "img#" + key)
{
//do stuff...
}
In this case key is a variable that contains the selector text which I am extracting from my icons object but there are other ways you could do this for instance construct an array variable that contains a list of all the style rules you want to target for example
Code: Select all
var selector_text = ["Saab", "Volvo", "BMW"];
in which case the if statement might look like this
Code: Select all
var selector_text = ["Saab", "Volvo", "BMW"];
if(rules[i].selectorText == "#" + selector_text)
{
//do stuff...
}
and what this would be looking for in the style sheet is
Code: Select all
#Saab {property name: value;}
#Volvo {property name: value;}
#BMW {property name: value;}
Finally inside the if statement you need to define what happens when the rule or rules that you are looking for are found, so for example if you had a rule like this in your style sheet
Code: Select all
p.warning
{
font-family: Arial;
font-size:1.2em;
color:red;
}
and you wanted to change the colour of the text you would do
but what about if you want to modify the same property for multiple rules ? well again this straightforward enough you would simple replace the bit at the end "green" with a variable like so
Code: Select all
rules[i].style.top = top_position;
in this case top_position contains a list of values for the top property and as it loops through my list of rules it updates the value of the top property for each one
so putting it all together the final code should look something like this
Code: Select all
if(event.type == "change")
{
var rules = document.styleSheets[1].cssRules
for (i=0; i < rules.length; i++)
{
if(rules[i].selectorText == "img#" + key)
{
rules[i].style.top = top_position;
}
}
}
What this says is: When the change event is triggered get the second style sheet and get a list of all the rules contained in that style sheet then loop through that list of rules to look for all the rules that match the specified selector text and then for each one update the value of the top property.
It should be noted here that if you know the index value of a given rule that you want to change and you are only looking to change a single rule then this can be done more simple for example
Code: Select all
if(event.type == "change")
{
document.styleSheets[0].cssRules[0].style.color = "orange";
}
What this says is when the change event is triggered get the first style sheet, get the first rule in that style sheet and then change the value of the color property to orange
the problem with doing things this way though is that it's targeting the rule you want to change by its position within the style sheet which is less then ideal because if you change the style sheet then the index value of the rule you are targeting changes.
so for example if I was to add a rule before the one above then the rule that I’m targeting would no longer be at index[0] it would at index[1] so the above would stop working until I updated the index value so in this instance the above would need to be changed to
Code: Select all
if(event.type == "change")
{
document.styleSheets[0].cssRules[1].style.color = "orange";
}
because a rule was added before it and therefore changed its position within the style sheet, unfortunately it seems that that the api for interactive with style sheets is incredibly primitive and trying to target style rules by there selector text which is a much easier way to go about things isn’t really possible and therefore you need to employ the sort of round about method described above.
now admittedly my knowledge of JavaScript is limited and I'm still learning but after countless hours of searching trying to find a simple and easy to understand explanation of how to access internal/external style sheets and then get and modify rules within them this is the best that I could come up with perhaps someone more knowledgeable could improve this, or provide a better method.