Creating an Internal Style Sheet With Javascript

Question

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
– Steve Valliere, Commented Aug 31, 2012 at 15:16
@Jaambageek jQuery is written in Javascript, so he can do it in Javascript... — Waleed Khan
– Waleed Khan, Commented Aug 31, 2012 at 15:16

Waleed Khan · Accepted Answer · 2012-08-31 15:19:40Z

6

parseURL returns an DOM element.
page = parseUrl('').search, if parseUrl('') returned a string, would return the string method search, which is not very useful in itself.
var site=getSecondPart(page)); has an extra parenthese.
text is not defined.
A class like ."nav_"4 is 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);

answered Aug 31, 2012 at 15:19

Waleed Khan

11.5k7 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Waleed Khan · Accepted Answer · 2012-08-31 15:26:57Z

1

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;
}

answered Aug 31, 2012 at 15:26

Waleed Khan

11.5k7 gold badges41 silver badges70 bronze badges

Collectives™ on Stack Overflow

Creating an Internal Style Sheet With Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related