change some css property in a wordpress theme using jquery

Question

I want to create one(or two) button(s) to switch my theme from dark to bright, i didn't know anything about jquery but I read something in w3schools and other references so I wrote a Jquery function that change some properties in my css file:

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({
            "color": "white",

        });
        $("div").css({
"background-color" : "black",});
    });
});

</script>

I put this script in bottom of header tag in header.php file, and I add a button to the footer of site

<button class="bright">طرح روشن</button>

but when I click on the button nothings happen, when I try this code on w3shcools editor it works but the button in my wordpress site does nothing. here is my code in W3shcools editor:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({
            "color": "white",
            "background-color": "#98bf21",
            "font-family": "Arial",
            "font-size": "20px",
            "padding": "5px"
        });
    });
});
</script>
</head>
<body>

<button>Set multiple CSS properties for all p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

And if there is a way to call that function with "href" I will grateful to help me how can I call it.

Allen Tellez · Answer 1 · 2015-07-13T21:11:38.163

1

You need to include the jQuery library on your page. You are using jQuery correctly but jQuery was not included on your page. Add the script like this.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

edited Jul 13 '15 at 21:11

answered Jul 13 '15 at 21:09

Allen Tellez

1,198
1
10
14

I added jquery library like this ` ` but nohing happen – Mehdi Jul 13 '15 at 21:10
Let me try loading it. – Allen Tellez Jul 13 '15 at 21:16
Yes jquery is loading now. Try also correcting the issue mentioned by sudhansu-choudhary. – Allen Tellez Jul 13 '15 at 21:18
Thank you for your help @tellez :) – Mehdi Jul 13 '15 at 21:22

Sudhansu Choudhary · Accepted Answer · 2015-07-13T21:21:06.353

1

You have a syntax error, try this,

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({
            "color": "white" 
        });
        $("div").css({
        "background-color" : "black"});
    });
});

</script>

You had a , after "background-color" : "black" and "color": "white"

And yeah, do add jQuery library, if you haven't like this,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

edited Jul 13 '15 at 21:21

answered Jul 13 '15 at 21:13

Sudhansu Choudhary

3,322
3
19
30

thank you a Lot Can you help How can I call this function with herf attribute? – Mehdi Jul 13 '15 at 21:21
@Mehdi sure copy the following into an html file and run, ` click me ` here I'm changing the `href` attribute of `` tag from blank to 'http://www.google.com' you can see that code under ` – Sudhansu Choudhary Jul 13 '15 at 21:37

score 0 · Answer 3 · answered Jul 13 '15 at 21:37

The nicest way to do this is addClass():

Put your css into a class in the css file:

.my-style {
    /* add your styles here */
}

Then use addClass() to add the css class to the element in JQuery:

$('.my-element').addClass('my-style');

This keeps your style separate from your JQuery which is a nicer way to work as it makes the style re-usable and makes a better separation between functionality (JQuery and JavaSCript) and style (css). You don't have to go to two places to change a colour now and if you want to add the styles elsewhere you can do so simply by using the class.

It also makes for cleaner, more understandable JQuery.

You can also use removeCLass() to do the opposite.

change some css property in a wordpress theme using jquery

3 Answers3