add dynamic css using javascript?

Question

I want to add dynamic css in my html page, I made a function using navigator function if the browser is mozilla then function will add mozilla css otherwise it should add IE css but somehow I am unable to make it working.

<head>
<script type="text/javascript">   
var cs;   
function nav() {        
var txt= navigator.appCodeName;             
if(txt=='mozilla') {
cs= mozilla;
}
else{
cs= ie;
}}
</script>     
</head>    
<body onload="nav ()">
<p id="cab"></p>    
</body>
</html>

I'll refer you to [this](http://stackoverflow.com/a/9295354/1114171) — T I, Feb 16 '12 at 09:31
Why are you adding the IE specific CSS for Safari, Chrome, Opera and everything else that isn't Mozilla? Why are you even worrying about Mozilla? Support for it was discontinued years ago and the Mozilla Foundation is focusing on Firefox for their browser work. — Quentin, Feb 16 '12 at 09:36
Why do you need this? Browser sniffing like this is very, very outdated and usually unnecessary. Most current browsers all interpret CSS more or less the same, so if you have deviations, then it's more likely you are doing something wrong, or if not, it's usually fixed with some simple work-a-round. — RoToRa, Feb 16 '12 at 09:37

score 3 · Answer 1 · edited May 23 '17 at 09:59

3

This is not really the way to implement dynamic css. Instead you should be using conditional commenting:

<!--[if IE 6]>
Insert CSS Link for IE6 here
<![endif]-->

See HERE

Also see THIS answer

edited May 23 '17 at 09:59

Community

1
1

answered Feb 16 '12 at 09:33

RonnyKnoxville

6,166
10
46
75

i want to add css after bworser recognization – Jitender Chand Feb 16 '12 at 09:40
1

You guys are just too darn quick! :) – greg84 Feb 16 '12 at 09:48

score 1 · Accepted Answer · answered Feb 16 '12 at 09:47

You really should use conditional IE comments for this, not JavaScript. This is for many reasons including:

The CSS will work when JavaScript is disabled or not available.
Your JavaScript handles Mozilla, but what about other browsers like Chrome and Opera?
You tend to need separate CSS to "fix" the page layout for IE (especially older versions...), but the rest of the major browsers should all cope with standard CSS rules.

The JavaScript you've written has a couple of issues:

The 'mozilla' string comparison will never match because browsers return it with a capital M: 'Mozilla'.
The '+cs+' in the link tag won't ever do anything because the browser won't treat it as javascript.

If you really want to do it with JavaScript you could remove the link tag from your page's head section and try a function something like this (not tested):

function setCss() {
    var cssFileName;

    if(navigator.appCodeName.toLowerCase() == 'mozilla') {
        cssFileName = 'mozilla-style.css';
    }
    else {
        cssFileName = 'ie-style.css';
    }

    // Create the element
    var cssFileTag = document.createElement("link")
    cssFileTag.setAttribute("rel", "stylesheet")
    cssFileTag.setAttribute("type", "text/css")
    cssFileTag.setAttribute("href", cssFileName)

    // Add it to the head section
    document.getElementsByTagName("head")[0].appendChild(cssFileTag)
}

Glad it helped @JitenderChand - feel free to accept it as the answer... ;) — greg84, Feb 16 '12 at 10:13

SpaceBison · Answer 3 · 2012-02-16T09:43:30.210

As an alternative that requires no scripting at all, you could detect IE, or not IE, by using conditional comments:

<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->

so you could detect IE this way, or load in the 'Mozilla' spreadsheet in this statement

<!--[if !IE]> -->
According to the conditional comment this is not IE
<!-- <![endif]-->

You also have some syntactic issues in your code, the line

<link href="css/+cs+.css" rel="stylesheet" type="text/javascript" />

will not work, you can't have that variable output inside the link tag, nor can the type be text/javascript.

add dynamic css using javascript?

3 Answers3