So I'm trying to use javascript to create an internal style sheet in the header, but its not working. This point of this script would be to have the tab for the page that I'm on be highlighted.
Below is not the actual site i'm implementing it on, just testing - but its not working correctly. Is this even possible? Yes I know I could do it with inline css or something but that would be must more confusing !
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
var a = document.createElement('a');
a.href = url;
return a;
}
var page=parseUrl('').search
function getSecondPart(str) {
return str.split('=')[1];
}
var site=getSecondPart(page));
text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')
}
</style>"
</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
So I'm trying to use javascript to create an internal style sheet in the header, but its not working. This point of this script would be to have the tab for the page that I'm on be highlighted.
Below is not the actual site i'm implementing it on, just testing - but its not working correctly. Is this even possible? Yes I know I could do it with inline css or something but that would be must more confusing !
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
var a = document.createElement('a');
a.href = url;
return a;
}
var page=parseUrl('').search
function getSecondPart(str) {
return str.split('=')[1];
}
var site=getSecondPart(page));
text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')
}
</style>"
</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
- I believe the css is already rendered at the point when your javascript is running. If you want to change something like that after the content is rendered you need something like jquery. – Steve Valliere Commented Aug 31, 2012 at 15:16
- 3 @Jaambageek jQuery is written in Javascript, so he can do it in Javascript... – Waleed Khan Commented Aug 31, 2012 at 15:16
- Good point @arxanas... I stand corrected. – Steve Valliere Commented Aug 31, 2012 at 15:17
- 1 I will say first edit your post to fix the code... – Prusse Commented Aug 31, 2012 at 15:18
2 Answers
Reset to default 6parseURLreturns an DOM element.page = parseUrl('').search, ifparseUrl('')returned a string, would return the string methodsearch, which is not very useful in itself.var site=getSecondPart(page));has an extra parenthese.textis not defined.- A class like
."nav_"4is not a valid class. - You have an extra closing brace.
All of these errors will prevent your code from running. A good tool to use to ensure syntax errors do not occur are Chrome's Web Developer, Firefox's Firebug, or JSHint.
Once that is done, do something like this:
var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-color: red; color: green; }";
document.body.appendChild(style);
There are two proper solutions, which are not what you're asking for but solve your problem.
The first way is to use a distinct nav class in each of your lis. That's what you should have been doing all along.
The preferred way:
<li class="nav" id="home"> ...
You can alternatively do this, but it's not a good idea, because the home li is unique.
<li class="nav nav-home"> ...
with
li.nav {
background-color: red;
color: green;
}
The second way is to use a CSS3 attribute selector. However, this may not work on all browsers:
li[class^="nav"] {
background-color: red;
color: green;
}