How can I make a button that imports a .css file?

Question

I want to make a button that imports the styles in a .css file.

Any way to do this? If not, what I am aiming for it to change multiple css properties with buttons, essentially creating themes for the website.

CSS file:

.body {
    background-image: url("example.png");
}

HTML file:

<html>
<head>

<script>
    // ???
</script>

</head>

<body>
    <button onclick="???">Import!</button>
</body>
</html>

EDIT: Anything, such as jQuery, can be used, as long as specified, to get the job done! I just NEED to make this work!

Add new `` elements to the document if you want to load a CSS file, or add a ` — Dai, Oct 25 '15 at 23:11
You can not trigger a button event using **just CSS**. You **need JavaScript/JQuery** for that. — divy3993, Oct 25 '15 at 23:11
http://stackoverflow.com/questions/7846980/how-do-i-switch-my-css-stylesheet-using-jquery — jfoutch, Oct 25 '15 at 23:12
@divy3993 I can add jquery, I just need to do this ANY way possible, plz! — DaFudgeWizzad, Oct 25 '15 at 23:18

score 3 · Accepted Answer · answered Oct 25 '15 at 23:19

I've done this a couple times. Here is a good tutorial.

You can use JS that targets your href attribute to load a new stylesheet.

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

<button onclick="swapStyleSheet('new.css')">New Style Sheet</button>
<button onclick="swapStyleSheet('default.css')">Default Style Sheet</button>

score 1 · Answer 2 · answered Oct 25 '15 at 23:42

I guess you need this:

Click the Button in below example

$(".btn-success").click(function()
{
 $('head').append('<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
 <button type="button" class="btn btn-success">Click Me</button>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Oct 25 '15 at 23:19

0

You can try this:

$('#grayscale').click(function (){
   $('link[href="style1.css"]').attr('href','style2.css');
});
$('#original').click(function (){
   $('link[href="style2.css"]').attr('href','style1.css');
});

answered Oct 25 '15 at 23:19

Ykaro Lemes

97
9

Could you edit my original code into this, please? I am not sure where everything would go. – DaFudgeWizzad Oct 25 '15 at 23:22

score 0 · Answer 4 · answered Oct 25 '15 at 23:53

It can be done relatively easily. First of all you need to catch whenever the button is being clicked, and then you need to add the style that will be added to the website when the button is clicked. for different buttons you can even define different stylesheets (for example something like a theme changer). The code to do that is:

$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/summer.css">');
});
$('button.summer').click(function() {
    $('head').append('<link rel="stylesheet" href="assets/css/winter.css">');
});

So when button with the class summer is clicked, another styleshet summer.css will be added to the head section of your page.

When button with the class winter will be clicked, another stylesheet will be added, winter.css to the head section of your page.

This method of work, requires firstly that all the rules that are identic on both summer and winter costum themes of your website will be put into another general main stylesheet called for example general.css or style.css and apply the summer.css and/or winter.css as only costumisations of the general theme.

So they dont replace the general stylesheet of your theme ... they extend it by costumising and creating extra rules for your page elements based on your needs.

Hope it helps.

How can I make a button that imports a .css file?

4 Answers4