Getting and setting the width and height of div by jQuery

There are two ways to get and set the width and height of a div: using the dimension function or using the css method

Get width and height

1. Dimension function: height() gets height, width() gets width

2. Obtain div width and height by CSS: obtain height by css("height") and width by css("width")

Difference: the value obtained by dimension function is integer, while the value obtained by css is string with px

$(".div1").click(function() {

    //1. The width() height() method is used to get the width and height. The integer is returned

    var divw = $(this).width();

    var divh = $(this).height();

    //2. Use css to get the string with px

    var divw = $(this).css("width");

    var divh = $(this).css("height");

    alert("div wide:" + divw + ";div high:" + divh);

});

Two pop-up values are:

Div width: 100;div height: 100

Div width: 100px;div height: 100px

Set width and height

The first method: set height(10) width(10) using the dimension function

The second method: use css function to set

css({"width":"10px","height":"10px"}) / / when using css to set multiple attributes, separate attributes in braces with commas

css("width","10px") / / when you use css to set a single property, separate the property name and property value with commas (you don't need to put them in braces)

The third method: use the animate setting (the specific usage is in the next article)

. animate({width:"10px",height:"10px"},4000); / / the difference between using animate and css parameters is that the attribute name of the animate parameter does not need to be enclosed in quotation marks

$("#update").click(function() {

    var divw = $("#w").val();

    var divh = $("#h").val();



    //1. Use the width() height() method to set the div width and height

    $(".div1").width(divw).height(divh);



    //2. Use css to set width and height

    $(".div1").css({"width":divw+"px","height":divh+"px"});



    //3. Write code using function chain

    //Note: when using css to set a single style, the parameter is css("width",divw+"px") comma separated

    $(".div1").css("width",divw+"px").css("height",divh+"px");



    //4. Function chain using different functions

    $(".div1").css("width",divw+"px").height(divh);



    //5. Animation () changes width and height

    $(".div1").animate({width:divw+"px",height:divh+"px"},4000);



    //6.animate() Animation: first change the width, then the height

    $(".div1").animate({width:divw+"px"},4000).animate({height:divh+"px"},4000);

});

html part code:

<!DOCTYPE html>

<html>



    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            .div1 {

                background-color: darkorange;

                width: 200px;

                height: 200px;

                cursor: pointer;

            }

        </style>

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

    </head>



    <body>

        <p>wide:<input type="text" id="w" /></p>

        <p>high:<input type="text" id="h" /></p>

        <input type="button" value="Modify dimensions" id="update" />



        <div class="div1"></div>

    </body>

</html>

Posted by skatermike21988 on Tue, 05 May 2020 10:56:29 -0700

Programmer Group

Getting and setting the width and height of div by jQuery

Hot Keywords