CODEWITHSUNDEEP
jqueryhtmlcss
Dan
Dan

Reputation: 1660

Edit external stylesheet with jquery

I am trying to create a web design template and I would like to edit the stylesheet based on a radio button selection using query.

Please see attached fiddle http://jsfiddle.net/2MKjv/1/

What i'm trying to achieve is, if i select blue, it will find the EXTERNAL stylesheet and the class .container and change the background to blue. So if i manually edit the stylesheet after, the changes will be saved, is this possible?

It's just a very basic html:

<div class="container">
  <input type="radio" name="colours" value="female" checked> red
  <input type="radio" name="colours" value="female">blue
</div>

& CSS

* {
padding:0;
margin:0;
}
html, body {
width:100%;
height:100%;
}
.container {
width:100%;
height:100%;
background:red;
}

Upvotes: 0

Views: 122

Answers (2)

Lu&#227; Melo
Lu&#227; Melo

Reputation: 113

Try this: http://jsfiddle.net/2MKjv/2/

It's a simply soluction.

$('input[type=radio]').on('click', function(){
    var color = $(this).attr('data-color');

    $('.container').css({'background': color});
});

Upvotes: 0

Nate Kibler
Nate Kibler

Reputation: 652

Simple answer: you can't with jQuery alone.

Longer answer: jQuery is an extension of JavaScript, which by its nature, is run on the client side in their browser. Thus, you can't directly change any files that are stored on the server. You can, however, use jQuery's AJAX feature to easily access some server-side script that could change the file, such as PHP.

In PHP, for example, you could use file_put_contents() to write to a file to achieve this.

Upvotes: 1

Related Questions