Set the width and height of the element

- .width() Set or get the width of the element, and get the value of numeric type
- .height() Set or get the height of the element
- You can write the unit or not
- The case is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 200px;
            height: 100px;
            background-color: darkorchid;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
           $("#btn").click(function () {
    
    
               //$("#dv").css("width",$("#dv").width()*2);
               //$("#dv").css("height",$("#dv").height()*2);
               //获取元素的宽和高
               console.log($("#dv").width());
               console.log($("#dv").height());
               $("#dv").width("600px");
               $("#dv").height("600px");
           });
        });
    </script>
</head>
<body>
<input type="button" value="点击" id="btn"/>
<div id="dv"></div>
</body>
</html>

Operation of elements left and top

* .offset()获取的是对象,可以设置,也可以获取
* .offset({"left":值,"top":值});设置
* offset()方法获取的是一个对象，该对象中有两个属性,left和top
* left和top包含left和margin-left和top和margin-top的值
*

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
    
    
            margin: 0;
            padding: 0;
        }
        div{
    
    
            width: 200px;
            height: 100px;
            background-color: indianred;
            //margin-top: 30px;
            position: absolute;
            left:100px;
            top:200px;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        //获取任意一个元素的任意一个样式属性的值
        function getStyle(element,attribute) {
    
    
            //判断浏览器是否支持这个方法
            if(window.getComputedStyle){
    
    
                return window.getComputedStyle(element,null)[attribute];
            }else{
    
    
                return element.currentStyle[attribute];
            }
        }
        /*
        * .offset()获取的是对象,可以设置,也可以获取
        * .offset({"left":值,"top":值});设置
        * offset()方法获取的是一个对象，该对象中有两个属性,left和top
        * left和top包含left和margin-left和top和margin-top的值
        * */
        //点击按钮,设置div的left和top的值是原来的2倍
        $(function () {
    
    
            $("#btn").click(function () {
    
    
                // 获取left和top-- - 获取的仍然是字符串类型
                // var l = $("#dv").css("left");
                // var t = $("#dv").css("top");
                // var left1 = parseInt(l) * 2;
                // var top1 = parseInt(t) * 2;
                // $("#dv").css("left", left1 + "px");
                // $("#dv").css("left", top1 + "px");
                // console.log($("#dv").offset());
                // $("#dv").css("left",$("#dv").offset().left*2);
                // $("#dv").css("left",$("#dv").offset().top*2);
                $("#dv").offset({
    
    "top":200,"left":600});
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

The distance the element curls out

* DOM中的scroll系列
* scrollLeft:向左卷曲出去的距离的值
* scrollTop:向上卷曲出去的距离的值
* scrollWidth:元素中内容的实际的宽
* scrollHeight:元素中内容的实际的高
* jQuery中:
* scrollTop()获取元素向上卷曲的距离,数字类型的值
* scrollLeft()获取元素向左卷曲的距离,数字类型的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 300px;
            height: 200px;
            border: 1px solid red;
            overflow: auto;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            $("#btn").click(function () {
    
    
                console.log($("#dv").scrollTop());
                //console.log($("#dv").scrollLeft());
            });
            //动态获取元素向上卷曲的距离
            $("#dv").scroll(function () {
    
    
                console.log($(this).scrollTop());
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv">
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
    太多的,太重的,太残忍的话;没纠缠,是你的,理由太假;不必如此难堪?
</div>
</body>
</html>

Insert picture description here

jQuery element width, height, left, top acquisition and width and height settings and the distance of the element curl out

Set the width and height of the element

Operation of elements left and top

The distance the element curls out

Guess you like