Here are HTML, css and jQuery source code examples of how to manipulate CSS elements on a webpage using toggleClass, .css(), addClass and removeClass with jQuery.

.CSS Method in jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- css  return property
    css property
    css multiple property
     -->
    <div class="box">
        <h1>this is heading1</h1>
        <h2>this is heading1</h2>
        <h3>this is heading1</h3>
    </div>
    <button class="btn1">returncss</button>
    <button class="btn2">applycss</button>
    <script src="jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            // return css property
            $(".btn1").click(function() {
                alert("backgroundused:  " + $(".box").css("background-color"))
            })

            // apply css property single and mutliple properties
            $(".btn2").click(function() {
                $("h1").css({
                    "background": "red",
                    "color": "white"
                })
                $("h2").css({
                    "background": "red",
                    "color": "white"
                })
                $("h3").css({
                    "background": "red",
                    "color": "white"
                })
            })
        })
    </script>
</body>
</html>

toggleClass, .css(), addClass, removeClass

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }

        h2 {
            color: blue;
        }

        .h1 {
            font-size: 3em;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        }

        .h2 {
            font-size: 3em;
            font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;

        }

        div {
            border: 1px solid black;
            width: 100px;
            height: 100px;
        }

        .box {

            width: 100px;
            height: 100px;
            background-color: slateblue;
        }
    </style>
</head>
<body>

    <h1>this is heading1</h1>
    <h2>this is heading2</h3>
        <div></div>
        <button class="adc">addclass</button>
        <button class="adc2">removeclass</button>
        <button class="adc3">toggleclass</button>
        <button class="adc4">css</button>

        <script src="jquery-3.6.0.min.js"></script>

        <script>
            $(document).ready(function() {

                // addclass()
                $(".adc").click(function() {

                    $("h1").addClass("h1")
                    $("h2").addClass("h2")
                    $("div").addClass("box")
                })

                // removeclass()
                $(".adc2").click(function() {
                    $("h1").removeClass()
                    $("h2").removeClass()
                    $(".box").removeClass()
                })

                // toggleclass
                $(".adc3").click(function() {
                    $("h1").toggleClass("h1")
                    $("h2").toggleClass("h2")
                    $("div").toggleClass("box")
                })

                // css
                $(".adc4").click(function() {

                    $("h1").css({
                        "color": "green"
                    })
                    $("h2").css({
                        "color": "red"
                    })
                    $("div").css({
                        "border-radius": "50%"
                    })

                })
            })
        </script>
</body>
</html>

Manipulating HTML DOM child Elements with jquery and the CSS .children Method

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box * {
            display: block;
            border: 2px solid black;
            color: black;
            padding: 5px;
            margin: 15px;
        }
    </style>
</head>
<body>
    <!-- parent()
  parents()
  parentuntil() -->
    <div class="box">
        <div style="width:500px;">div (great-grandparent)
            <ul>ul (grandparent)
                <li>li (direct parent)
                    <span>span</span>
                </li>
            </ul>
        </div>
    </div>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("ul").find("span").css({
                "border": "5px solid red"
            })
            $("ul").children().css({
                "border": "5px solid red"
            })
        })
    </script>
</body>
</html>

 

Tags: jQuery, jQuery CSS, toggleClass, .css(), addClass, removeClass, javascript, HTML Child Elements, Children(), nth-child, nth-last-child,

Source Licence: MIT license

Content licenced from Code Snippets and Tutorials

Categorized in: