CODEWITHSUNDEEP
javascripthtmlcss
user1361154
user1361154

Reputation: 63

Creating an Internal Style Sheet With Javascript

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>

Upvotes: 3

Views: 5022

Answers (2)

Waleed Khan
Waleed Khan

Reputation: 11467

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

Upvotes: 1

Waleed Khan
Waleed Khan

Reputation: 11467

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

Upvotes: 6

Related Questions