How to change the css and html file at the same time

Question

I want to change the css and the mainpage at the same time

The index.html and sub.html look almost the same, but the sub.html doesn't have the "a" - Tags for links and just a one back and forward btn.
I know if I change the html the new header should contain the right css in the "head"-Tag.
Maybe I need a global var but I don't know how to use it in javascript.

This example has only nr01 to nr03 ... the final document will have up to 20 at start and later more... and I don't want to change all documents in the future because the number of items changes. That's why I'm choosing this way.

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="CSS/style.css" />
    <link type="text/css" rel="stylesheet" href="CSS/nr00.css" />
    <script type="text/javascript" src="JS/loadcss.js"></script>
</head>
<body>
    <div class="content">
        <div class="item nr01"><a href="javascript:othercss('css/nr01.css')" onclick="href='sub.html';">a</a></div>
        <div class="item nr02"><a href="sub.html" onclick="othercss('css/nr02.css');return false;">b</a></div>
        <div class="item nr03"><a href="sub.html" onclick="javascript:othercss('css/nr03.css')">c</a></div>
    </div>
</body>

The JS file

//JavaScript Document
function othercss(dat)      
        {setTimeout(function(){document.getElementsByTagName('link')[1].href=dat}, 200);alert ('here load the html?');}

The first link showed the sub.html but didn't load the javascript.

The second loaded the javascript and changed the css, but didn't load the sub.html

The third link loaded the javascript and loaded sub.html but didn't change the css.

Could I load the sub.html first and then have a function change the css file?

I'm abit confused as well... if you're loading a new page `sub.html`, why don't you just set the stylesheet for that page inside of `sub.html`? Then you don't need any javascript, and have just a normal link. — Populus, Oct 24 '14 at 14:38
Is it that you want to change the style of the page after clicking an item from the content? — Mike Ante, Oct 24 '14 at 14:41
@Mike: right the answer below is really close to my solution at the moment — Andre Rases Kühlewein, Oct 24 '14 at 16:39
@poulus: I don't want up to 20 sub.html with the same content — Andre Rases Kühlewein, Oct 24 '14 at 16:45

nothingisnecessary · Accepted Answer · 2014-10-24T17:09:45.860

Could I load the sub.html first and then have a function change the css file?

Yes, and in this case you should.

The reason it was not working before is that you are trying to change the stylesheet right before you load a new page, and you will only see the change on the current page. You will not see the stylesheet on the next page unless you do some extra work.

In this example each link specifies a theme so that when the page loads it will replace the second stylesheet dynamically.

There are many ways that this could be improved, but I kept it pretty simple for demo purposes.

Do this in your HTML files:

add a load() function that fires onload

add a theme parameter to each href

<body onload="load();">
   <div class="content">
        <div class="item nr01"><a href="sub.html?theme=nr01">a</a></div>
        <div class="item nr02"><a href="sub.html?theme=nr02">b</a></div>
        <div class="item nr03"><a href="sub.html?theme=nr03">c</a></div>
    </div>

Do this in the .js file:

define load() function that uses the theme parameter to change the css on load

this expects there to be at least 2 link tags on the page, and will blindly replace the second stylesheet URL based on the specified theme. Assumption is that nr00 is your default stylesheet and is the second link

 function load()    {
     var theme = getUrlParam("theme");
     othercss("CSS/" + theme + ".css");
 }

 function othercss(dat)      
 {
     var link = document.getElementsByTagName('link')[1];
     link.disabled = true;
     link.href = dat;
     link.disabled = false;
 }

 // getUrlParam
 // borrowed from: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
 function getUrlParam(name) {
     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
     var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
         results = regex.exec(location.search);
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
 }

First of all this solution looks great.But if you add the *.css in the case (themeName = "*.css") It's not nessasary to add these later again.And maybe i can add a "for loop" — Andre Rases Kühlewein, Oct 24 '14 at 15:41
Hi nothingisnecessary, after you change the js file, the index.html load with no theme in it. So it loads with a empty .css as a 'link' file. How can i add a fall back solution? — Andre Rases Kühlewein, Oct 24 '14 at 16:49
You could specify a default theme if `theme === undefined` for example, or just leave it as you had your current example: always include the default stylesheet as the second `link`. Basically: use nr00.css as the default, just like you have it in your example above. Then if a theme is passed, nr00 will be replaced with that theme. You may want to use a whitelist instead of just naively grabbing the theme parameter, then you can control what stylesheets are supported, and do the defaulting a little easier, etc. — nothingisnecessary, Oct 24 '14 at 16:59

How to change the css and html file at the same time

1 Answers1