How can I write the javascript script to modify this css file?

Question

Directory Structure:

index.html
--admin
----suit.css

And the part of the css file is:

#suit-left{width:200px;right:240px;margin-left:-100%}
.suit-columns{padding-left:200px;padding-right:40px;}

I want to write a javascript code in the index.html:

<button onclick="">Change CSS</button>

to change the css file like this:

#suit-left { display: none; }
.suit-columns { padding-left: 0; }

How can I do this?regards,thanks a lot

Do you want to change the actual CSS rule, or just modify the elements on the screen? — Lix, Mar 08 '14 at 09:05
Thanks to Hashem Qolami to help me edit the code format.Would you please guide me? — BruceZhong, Mar 08 '14 at 09:06
@BruceZhong - please answer the questions in the above comments so that we can better understand what you're trying to do. — Lix, Mar 08 '14 at 09:07
Because I want to modify this to achieve the goal:Make the side-bar auto-hide.So I don't know either modify the CSS rule or modify the elements on the screen I accomplish it more properly. — BruceZhong, Mar 08 '14 at 09:08

Suman Bogati · Accepted Answer · 2014-03-08T09:35:11.760

0

If you want the apply css on particular element by javascript, do something like this.

<button onclick="changeCss()">Change CSS</button>

UPDATE

<script>
    function changeCss(){
        var suitInput = document.getElementById('suit-left');
        suitInput.style.display = 'none';

        //UPDATED the answer    
        var siteCol = document.getElementsByClassName('suit-columns')[0];
        siteCol.style.paddingLeft = '0';
        //siteCol.style.paddingRight = '0'; //incase of want padding right 0
    }
</script>

edited Mar 08 '14 at 09:35

answered Mar 08 '14 at 09:05

Suman Bogati

6,289
1
23
34

Thanks,it run well,but I think I forget the whole code of . `suit-columns{padding-left:200px;padding-right:40px;}` it must be a part of `#content h1,#content h2,#content h3,#content h4,#content alert{text-shadow:0 1px rgba(255,255,255,0.5)} .suit-columns{padding-left:200px;padding-right:40px;}` So how can I modify the `.suit-columns`? – BruceZhong Mar 08 '14 at 09:21
@downvoter can you please explain why that I can fix it? – Suman Bogati Mar 08 '14 at 09:22
So you want to apply above css on element which class name is `.suit-columns`? – Suman Bogati Mar 08 '14 at 09:27
Sorry I vote down it careless，I want to vote it up~When I have the reputation scores I will vote up~Sorry I am a newbie，forgive me~ – BruceZhong Mar 08 '14 at 09:28
no problem, be careful for next time, please give the anwer for what I have asked to you. – Suman Bogati Mar 08 '14 at 09:29
,yes sir I want to modify the `.suit-columns{padding-left:200px;padding-right:40px;}` to `.suit-columns { padding-left: 0; }` – BruceZhong Mar 08 '14 at 09:30
OK,thanks alot,it run well,I also have another quesions: 1.If I want to stay the modified status when I refresh the page,how can I do this? 2.How can I recovery the css file to the status I modified before when I click this button again? – BruceZhong Mar 08 '14 at 09:41
For first you need to store the applied css (after click) on `localStorage` and when page is being onload, you need to read the css from `localStorage`, For second you need to contain the previous css code before apply new one. Example of `localStorage` http://www.w3schools.com/html/html5_webstorage.asp – Suman Bogati Mar 08 '14 at 09:49
thanks for your advice!I will follow your suggestion to complete the work,and I will remember to `vote up` this!ah. – BruceZhong Mar 08 '14 at 09:52
I found that if my browser not support html5,such as IE6~~How can I use the `SessionStorage` or `localStorage` in IE6? – BruceZhong Mar 16 '14 at 15:43
`localStorage` and `sessionStorage` are part of the `html5` which is not supported by `ie6`, for storage purpose you can use the `cookie` in `ie6`. – Suman Bogati Mar 16 '14 at 17:28

score 0 · Answer 2 · edited May 23 '17 at 12:28

What I would recommend here is to manipulate the classes associated with the element rather than changing the class definition itself.

Here is a simple example:

.sideBar{ /* your normal rules here */ }
.sideBar.hidden { display:none; }

In order to hide your sidebar, all you'd have to do is add the hidden class name to the element.

In this way, you would define CSS rules for your sidebar when it is open, and different rules for when it is closed. Once you have those two states pre-defined, all you'll have to do is change/add/remove the class to hide/display your sidebar.

I feel like this was the main issue with your question here. The other tasks you wish to perform such as clicking on a button or actually manipulating the class attribute has been covered in many posts already. Here are some useful links for you -

Thanks for your help,I will review the documents – BruceZhong Mar 08 '14 at 09:27 — BruceZhong, Mar 08 '14 at 09:27

Sidhdharajsinh Sodha · Answer 3 · 2014-03-08T10:02:22.617

You can write the script in this way and paste below script at head block of index.html I assume that you have knowledge of jquery.

<script   src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">    </script>   
<script>
$(document).ready(function(){
function ChangeCss(){
 $('#suit-left').css('display','none');
 $('.suit-columns').css('padding-left','0');
}
<script>

<button onclick="ChangeCss();" >

Now it will help!

So basically using css function of jquery you can change css/style attributes. I hope it will help you.

How can I write the javascript script to modify this css file?

3 Answers3