How do I use a html button to call a css stylesheet

I am trying to create a button that will call a css script to change the background image of the page

I have tried several things and have had some success with

<link id="backimage" rel="stylesheet" type="text/css" href="default.css">
<script>
function changecss(sheet){
	document.getElementById('backimage').setAttribute('href', sheet);
	
	
}
</script>```

and

        <button type="button" onclick="changecss('bg2.css');">
        <font face="Arial Narrow"><b>Change BG</button> 
 
        <button type="button" onclick="changeBodyBg('black');">
        <font face="Arial Narrow"><b>&nbsp;Black&nbsp;&nbsp; </button>
        <button type="button" onclick="changeBodyBg('red');">
        <font face="Arial Narrow"><b>&nbsp;Red&nbsp;&nbsp; </button>
        </b></font><button type="button" onclick="changeBodyBg('orange');">
        <font face="Arial Narrow"><b>Orange</b></font> </button>
        <button type="button" onclick="changeBodyBg('yellow');">
        <font face="Arial Narrow"><b>Yellow</button>
        </b></font>
        <button type="button" onclick="changeBodyBg('green');">
        <font face="Arial Narrow"><b>Green</button>
        </b></font>```
        
The problem is that it works if it is the first option chosen but, 
if I select any of the other buttons, which all work, then it does not work

(css stylesheet code is:    

body {
background: ##1baa00;
background-image: url("zenbg-1.png"), url("zenbg-2.png");
background-repeat: repeat-x, repeat;
}

Just change the class and define a different background image for that class, why are you trying to dynamically load CSS?

Hi Dan
I am a complete beginner so not sure what this means. I have an image made up of two images which works perfectly when loaded using a css link. There are buttons on the page to change the color of the background (the page is a quiz/game ) to make it easier/more appealing. I want to include a button to bring back the images(s) if someone wants to do this while playing the game. (You can see the idea at http://www.anddum.com/ozmusic/gosetcovers/covers_matchits/1967/index.htm - where I have a button called go set but this uses html and distorts the image using cover)

I realise that, but you don’t load new stylesheets in every time you want to do something, that would be extremely unwieldy and is an extremely complicated way of doing things, it’s not how you use CSS. You load the CSS once, when the web page opens.

With CSS, you can specify some properties for a class, which applies the styles to whatever element you attach it to:

.blue {
  color: blue;
}
<p class="blue">Some text</p>

Now if you swap that class for a different class it will change the properties applied to it

.red {
  color: red;
}

If you change the class blue on that paragraph element to red, then the color will change to from blue to red.

So in your example, you would apply some styles for one class, then on button click, change the name of that class to a different one in the HTML.

Thanks Dan,

I think I get what you are saying. I will need to work on it because I am learning a lot from trial and error. I will see what I can come up with - appreciate your help

1 Like