2

i have two buttons. now i want the vistor to click the button2, the site invoks the style2.css,when click button1. invoks the style.css. the default shows the style.css is there a ways to use jquery change the the link path of css. 

<link rel="stylesheet" href="http://www.example.com/themes/style.css" type="text/css"/>

if click button2, change the line to <link rel="stylesheet" href="http://www.example.com/themes/style2.css" type="text/css"/>

or other ways to get the effect. thank you

Improve this question

4 Answers 4

Reset to default
2

In button2's onclick handler, do this:

$('link').attr('href', 'http://www.example.com/themes/style2.css');

EDIT: Apparently I need to point out that this will affect all link tags if you have more than one, so use an id as your selector if you have more than one link, e.g.:

<link id="myLink".../>

$('#myLink).attr('href',...);
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This will change the href of each and every link tag in the document.
Yes. @zhuanzhou, if you were somehow confused by that (I didn't think you would be), then you need to add an id to your link tag and use it as your jQuery selector if you have more than one link tag.
you ways is great.but how to add the id only to the css link label?
@zhuanzhou, are you saying you don't have access to the source code? If not, then you'll have to do some sort of (brittle) hack like using getElementsByTagName('link')[num] where 'num' is the index of the link tag.
1

You could let jQuery change/add a class to your <body> element. This does mean you'll have to have all of the styles in one stylesheet.

For example:

CSS:

.some-style        { color: #f00; }
.blue .some-style  { color: #00f; }
.green .some-style { color: #0f0; }

HTML:

<html>
<body>
    <p class="some-style">Some text</p>
    <button id="btn-1">Blue</button>
    <button id="btn-2">Green</button>
</body>
</html>

Javascript(simplified for example purposes):

$('#btn-1').click(function() {
    $('body').addClass('blue');
});

$('#btn-2').click(function() {
    $('body').addClass('green');
});
Improve this answer

1 Comment

But this isn't really practical. I've actually had to do what zhuanzhou is asking about. When there are many rules with many differences between the two stylesheets, it's easiest to just change the link href.
1

Try to put a condition with your php code, like this:

<?if(buttonOneClicked()){?>
<link rel="stylesheet" href="http://www.example.com/themes/style.css" type="text/css"/>
<?}else{?>
<link rel="stylesheet" href="http://www.example.com/themes/style2.css" type="text/css"/>
<?}?>
Improve this answer

3 Comments

i don't know what's the meaning of this :if(buttonOneClicked()).could you explain it. thank you
Oh, I was thinking about a function made with the purpose of reading, for example, a POST field coming from a form, or some way of carrying the variable generated by the button, or simply the button itself. It's just the function representing the action. Perhaps it complicates what you're looking for.
At the same time, I've seen the answer with jquery, and I think it's also a good answer.
1

Pretty good write-up on this basic idea here:

http://www.rickardnilsson.net/post/2008/08/02/Applying-stylesheets-dynamically-with-jQuery.aspx

If you find you cannot remove a css file, you may eed to have your buttons redirect with a url variable your jquery can read and attach the appropriate css file.

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.