change some css property in a wordpress theme using jquery

1 Views

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

Read More
<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.

Post Views: 1

Related posts

3 comments

  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>

  2. 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>

  3. 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.

Comments are closed.