1

I used a tutorial at http://www.w3schools.com/jquery/jquery_css.asp to use jQuery to allow visitors to change styles. I created two buttons, one which allows visitors to change the font to Georgia, another to change the background and font colors.

This is my code:

<script> $(document).ready(function(){ $("button#btn24").click(function(){ $(".Page1").css({"font-family":"Georgia"}); $("header").css({"font-family":"Arial"}); }); }); $(document).ready(function(){ $("button#btn25").click(function(){ $(".Page1").css({"background-color":"black","color":"fff"}); }); }); </script> <button id="btn24" style="background: #900; font-family: Georgia;">Georgia</button> <button id="btn25" style="background: #000;">Black</button>

Now I'm ready for the next step - allowing users to return to the default style. Are there ways to remove the styles invoked by a button, two or more buttons or all buttons?

Improve this question
2
  • 1
    No, use classes to add the styles and remove the classes for the 'default' styles. Commented Dec 28, 2014 at 16:47
  • look a simply way in my opinion is to make 2 css files with default and additional .. and give your <link class=""> a class and change href for it in button click event Commented Dec 28, 2014 at 16:50

1 Answer 1

Reset to default
1

I would suggest to simply create a few css styles that aren't used initially. If the button is pressed, add a class to the body. You need to use that class in the css styles too. (So have a style .specialClass button for example, where specialClass is the class you assign to the body when you want to set the special styles on)

If you want to remove the additional layout, remove the css class with a button and it will return to default.

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

3 Comments

I think I understand; the tutorial I cited discusses adding and removing classes, too. However, I don't understand how you create CSS styles that aren't included by default. If I have a CSS style in my head section or on a stylesheet I'm linked to, then it will be a part of the food chain. How do I create a style that isn't included by default?
By prefixing it with a class you initially don't use. See the sample between parentheses in my answer.
OK, I think I get it. In my HTML, I might have the following code: <div class="first">. But my style sheet might have two styles, .first and .second. I can then use JQuery to change my html to <div class="first second">. I'll give that a try. Thx!