Why are use the width() and height() in JQ?

Asked 28-Jul-2021
Viewed 360 times

1 Answer


1

jQurery width() method use to get and set the width of selected element.

Syntax:
$(selector).width()
return the current width of selected element
$(selector).width(current width);
set the current width on selected element
$(selector).width(function(index, current width))
and also this signature used to set the current width on selected elements

Example:

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title></title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $('#get').click(function () {
                alert('Witdh : ' + $('div').width()+' px');
            });
            $('#set').click(function () {
                $('div').width('100%');
                $('div').text(' div width is 100% of any size ');
            });
        });
    </script>
    <style>
        body {
            margin:10px;
            padding:10px;
        }
        div {
            background-color:cyan;
            height:120px;
            width:50%;
            color:white;
            text-align:center;
            font-size:40px;
        }
    </style>
</head>
<body>
    <button id='get'>Click Me</button> <button id='set'>Set width 100%</button> <br /><br />
    <div>
        this is div and div width is 50% of any size
    </div>
</body>
</html>

Output:

Why are use the width() and height() in JQ?