Home/ Questions/Q 7506813
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T22:21:25+00:00

I want to add dynamic css in my html page, I made a function

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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)
}
    • 0