3

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!

Improve this question
4
  • Add new <link rel="stylesheet" /> elements to the document if you want to load a CSS file, or add a <style> element to the DOM with the inline CSS as the element's textContent. Commented Oct 25, 2015 at 23:11
  • You can not trigger a button event using just CSS. You need JavaScript/JQuery for that. Commented Oct 25, 2015 at 23:11
  • 1
    stackoverflow.com/questions/7846980/… Commented Oct 25, 2015 at 23:12
  • @divy3993 I can add jquery, I just need to do this ANY way possible, plz! Commented Oct 25, 2015 at 23:18

4 Answers 4

Reset to default
3

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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>

Improve this answer

Comments

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'); });

Improve this answer

1 Comment

Could you edit my original code into this, please? I am not sure where everything would go.
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.