How to change css properties using jQuery

We can use jQuery to chance CSS design & properties of an HTML elements. There is css method available for this purpose. The css function allows us to any css property of a selected element. Example is mentioned below: css method example


<html>
<head>
    <title>Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="textElem" value="Sample Text">
    <button id="btnGreenElem">Green Text</button>
    <button id="btnRedElem">Red Text</button>

    <script>
        $(document).ready(function () {
            $('#btnGreenElem').on('click', function () {
                $("#textElem").css({color:'green'});
            });

            $('#btnRedElem').on('click', function () {
                $("#textElem").css({color:'red'});
            });
        });
    </script>
</body>
</html>