CODEWITHSUNDEEP
javascriptjquery
dvlden
dvlden

Reputation: 2462

Target link href="" with jQuery

I am trying to target following with jQuery:

<link rel="stylesheet" href="css/test.css">

What I cannot figure out is how to set default path (css folder) ?

<button data-button="test">Just a Test</button>


<script>
var button = $('button'),
    link = $('link'),
    stylesheet = $(this).data('button');

    button.on('click', function() {
        console.log(this);
        link.attr('href', stylesheet + '.css');
});
</script>

Right now this would change css on button click only if css is in root... So how do I tell him that CSS default path is at "css/".

Trying to find without success.

P.S. One question releated to JS but not to question title.

What is more perferred and correct:

var $something = $('#something');
or
var something = $('#something');

Upvotes: 0

Views: 663

Answers (3)

Muthu Kumaran
Muthu Kumaran

Reputation: 17900

Why don't you simply mention the path css/ in the code itself

link.attr('href', 'css/'+stylesheet + '.css');

To answer to your other question,

var $something and var something are both valid variable names. Your pick.

Upvotes: 3

mekwall
mekwall

Reputation: 28974

If you want to switch stylesheet, you should use alternate stylesheets instead.

<link rel="alternate stylesheet" href="css/test1.css">
<link rel="alternate stylesheet" href="css/test2.css" disabled>

In jQuery you can then remove/add the disabled property to switch stylesheets:

var links = $("link[rel='alternate stylesheet']");
var button = $("button");

button.on('click', function() {
    links.filter(":disabled").prop("disabled", false).siblings().prop("disabled", true);
});

Upvotes: 4

devnull69
devnull69

Reputation: 16544

As easy as this

link.attr('href', 'css/' + stylesheet + '.css');

Upvotes: 5

Related Questions