jQuery中元素宽，高，left,top的获取和宽高设置以及元素卷曲出去的距离

最新推荐文章于 2023-02-13 12:35:03 发布

杏黄的三叶草

最新推荐文章于 2023-02-13 12:35:03 发布

阅读量1.3k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/dwjdj/article/details/105999732

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

本文介绍了如何使用jQuery来设置和获取元素的宽度、高度、left和top属性，以及元素距离浏览器边界的卷曲距离。通过示例代码，详细解析了相关操作方法。

摘要由CSDN通过智能技术生成

设置元素的宽度和高度

- .width()设置或者获取元素的宽,获取的是数值类型的值
- .height()设置或者获取元素的高
- 可以写单位也可以不写单位
- 案例如下

<!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>

元素left和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>

元素卷曲出去的距离

* 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>