how to make one button change two stylesheet's

Question

hello people of stackoverflow forum.

so on my website I have added the option to change the color on the layout, and I would like to change the header to but i don't know how. the code I am using is in javascript and I am using buttons to change between stylesheets. now my question is how do i go about to make one button changing two stylsheets in one click. the header stylesheet is rather big and i would like it to be separated from the other styling.

where i got the code:

-LINK-

javascript:

<script type="text/javascript"> function swapStyleSheet(sheet){ document.getElementById('pagestyle').setAttribute('href',sheet); } </script>

HTML:

Head:

<link id="pagestyle" rel="stylesheet" type="text/css" href="css/index/index_purple.css" media="screen"/>

Body:

<button onClick="swapStyleSheet('css/index/index_purple.css')">Purple style</button> <button onClick="swapStyleSheet('css/index/index_orange.css')">Orange style</button> <button onClick="swapStyleSheet('css/index/index_blue.css')">Blue style</button> <button onClick="swapStyleSheet('css/index/index_red.css')">Red style</button>

My page:

-LINK-

"I would like to change the header" - What do you mean by "header"? Do you mean you want to change the text of a particular element? — nnnnnn
– nnnnnn, Commented May 7, 2013 at 21:36
the header color. if you go and take a look on my page you would understand. — TheLifeIsYours
– TheLifeIsYours, Commented May 7, 2013 at 21:41

Tobias Krischer · Accepted Answer · 2013-05-07 21:36:48Z

4

Is there any reason why you do not try to use the command in JS several times?

<script type="text/javascript"> function swapStyleSheet(pagesheet, headsheet){ document.getElementById('pagestyle').setAttribute('href',pagesheet); document.getElementById('headstyle').setAttribute('href',headsheet); } </script>

The button definition would be

<button onClick="swapStyleSheet('css/index/index_purple.css','css/head/head_purple.css')">Purple style</button>

answered May 7, 2013 at 21:36

Tobias Krischer

3844 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TheLifeIsYours Over a year ago

Beacause I don't know javascript yet, im mostly focusing on learning HTML and CSS3 properly. And thanks for the answer it worked (ofc).@Tobias

Tobias Krischer Over a year ago

No problem :) In Javascript (as in most script languages) you can simply call functions more than once. By ending one command with a semicolon, the parser will wait for the next command... If the anser helped, you could also accept it ;)

TheLifeIsYours Over a year ago

I must say i was kinda on the track when i was messing around in the code, but I certainly would not have found out of it by myself. again thank you :)

Tobias Krischer Over a year ago

I guess that is the purpose of the site, so just feel free to ask :)

Collectives™ on Stack Overflow

how to make one button change two stylesheet's

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related