Quick Contact

    jQuery Get and Set CSS Properties

    jQuery css() Method

    The jQuerycss() method is used to acquire the computed value of a CSS property or to set one or more CSS values for the specified components.

    This approach provides a simple way to apply styles directly to HTML components (i.e. inline styles) that haven’t been or can’t readily be defined in a stylesheet.

    Get a CSS Property Value

    Simply giving the property name as an argument to the css() function will return the computed value of an element’s CSS property. The basic syntax is as follows:

    $(selector).css(“propertyName”);

    When a < div> element is clicked, the following example will fetch and show the computed value of its CSS background-color property.

    Examples

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Get the Value of a CSS Property< /title>
    < style>
    div{
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
    display: inline-block;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("div").click(function(){
    var color = $(this).css("background-color");
            $("#result").html(color);
        });    
    });
    < /script>
    < /head>
    < body>
    < div style="background-color:orange;">< /div>
    < div style="background-color:#ee82ee;">< /div>
    < div style="background-color:rgb(139,205,50);">< /div>
    < div style="background-color:#f00;">< /div>
    < p>The computed background-color property value of this DIV element is: < b id="result">< /b>< /p>
    < /body>
    < /html>
    

    Set a Single CSS Property and Value

    For establishing a single CSS property for the elements, the css() method can take a property name and value as distinct parameters. The fundamental syntax is as follows:

    $(selector).css(“propertyName”, “value”);

    When the button is clicked, the CSS background-color property of the div> elements is set to the colour value blue.

    Examples

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set the Value of a CSS Property< /title>
    < style>
        .box{
    width: 100px;
    height: 100px;
    margin: 10px;
    cursor: pointer;
    border: 1px solid #cdcdcd;
    display: inline-block;
        }        
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $(".box").click(function(){
            $(this).css("background-color", "blue");
        });    
    });
    < /script>
    < /head>
    < body>
    < div class="box">< /div>
    < div class="box">< /div>
    < div class="box">< /div>
    < div class="box">< /div>
    	< p>< strong>Note:< /strong> Click inside the empty box to fill the background color.< /p>
    < /body>
    < /html>
    

    Set Multiple CSS Properties and Values

    The css() method can also be used to set numerous CSS properties. The basic syntax for setting multiple properties for elements is as follows: $ (selector).

    $(selector).css({“propertyName”:”value”, “propertyName”:”value”, …});

    The following example will simultaneously set the background-color and padding CSS properties for the selected items.

    Examples

    < !DOCTYPE html>
    < html lang="en">
    < head>
    < meta charset="utf-8">
    < title>jQuery Set the Values of Multiple CSS Properties< /title>
    < style>
    p{
    font-size: 18px;
    font-family: Arial, sans-serif;
        }
    < /style>
    < scriptsrc="https://code.jquery.com/jquery-3.5.1.min.js">< /script>
    < script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").css({"background-color": "yellow", "padding": "20px"});
        });    
    });
    < /script>
    < /head>
    < body>
    < h1>This is a heading< /h1>
    < p style="background-color:orange;">This a paragraph.< /p>
    < p style="background-color:#ee82ee;">This is another paragraph.< /p>
    < p style="background-color:rgb(139,205,50);">This is none more paragraph.< /p>
    < p>This is one last paragraph.< /p>
    < button type="button">Add CSS Styles< /button>
    < /body>
    < /html>
    

    FAQS

    Q1. What is addClass and removeClass in jQuery?

    The selected items receive one or more class names when using the addClass() method. This technique simply adds one or more class names to the class property; it does not remove any existing class attributes. Tip: Use spaces between class names to add more than one class.

    Q2. What is the difference between Get and Set in jQuery?

    Except for text(), which returns the values of all the components, getters only provide the required value for the selection’s first element. Setters, on the other hand, change all of the elements. The jQuery object that setters return enables you to keep calling jQuery functions on your choice.

    Q3. What is the use of Ngclass?

    In AngularJS, the ng-class directives is utilized to define the CSS classes for HTML components. On an HTML element, it is utilized to dynamically bind classes. The ng-class value can be a string, an object, or an array. In the case of a string, it must have multiple class names, separated by spaces.

    Q4. What is toggleClass in jQuery?

    The selected items can have one or more class names added or removed using the toggleClass() function. This method looks for the supplied class names on each element. The class names are inserted if they are absent and removed if they are present, producing a toggle effect.

    Q5. Why we use get and set with properties?

    A class can expose a public method for acquiring and setting values using variables, while covering implementations or verification code. The value of the property is returned by a get property iterator, and a new value is assigned by a set property accessor.

    Copyright 1999- Ducat Creative, All rights reserved.

    Anda bisa mendapatkan server slot online resmi dan terpercaya tentu saja di sini. Sebagai salah satu provider yang menyediakan banyak pilihan permainan.