Geek asks and answers

How to: dynamically switch css page

I am working on a webpage for an embedded device, where server space is very limited. I want the user to be able to switch between day and night web browsing modes. To do this, I would just like to load the page using another web page by clicking a button. I do not want to have two copies of each page because I do not have enough space. Is there a way to switch to another css page or load css dynamically? I can use only html and javascript. No PHP or asp.net.

+3
source share
2 answers

Let me say even simpler:

1: One CSS:

.day {
  color: black;
  background-color: white;
}

.night {
  color: white;
  background-color: black;
}

.day #content {
  color: blue;
}

.night #content{
  color: red;
}

2: One HTML:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="dayornight.css">
  </head>
  <body class="day">
    <div id="content">
        <a>Hello World!</a>
    </div>
  </body>
</html>

3: JavaScript jQuery, , ​​ .

, , CSS , , - .

+2

javascript:

JS:

function change_css(){
    var oLink = document.createElement("link") 
    oLink.href = "new_css.css"; //new css filename
    oLink.rel = "stylesheet"; 
    oLink.type = "text/css"; 
    document.body.appendChild(oLink);
}

HTML:

<button onclick="change_css()" value="css change"/>
+2

More articles:


All Articles