关于jQuery_CSS操作中的样式，宽度，高度，位置方法使用

最新推荐文章于 2024-11-01 15:19:31 发布

NewBurlaSKing

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量192

点赞数

分类专栏： jQuery 文章标签： html 前端 jquery javascript

本文链接：https://blog.csdn.net/qq_55961861/article/details/126395215

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jQuery_CSS操作

一.方法

样式操作
- css
  
  获取和设置匹配元素的样式

宽度，高度操作
- width height
  
  获取元素的当前高度值宽度值或设置元素的高度值宽度值
- innerWidth innerHeight
  
  为元素的当前计算高度值和宽度值,包括padding，但是不包括 border
- outerWidth outerHeight
  
  获取元素的当前宽度值和高度值,包括padding，border和选择性的 margin

位置操作
- offset
  
  获取元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档
- position
  
  获取元素的当前坐标，相对于 offset parent 的坐标
- scrollLeft() scrollTop()
  
  获取元素的当前水平和垂直滚动条的位置。设置每个匹配元素的水平和垂直滚动条位置

二.实例

样式，宽度，高度操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            padding: 20px;
            border: 5px solid green;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 获取样式值
        var d_w = $('.box').css('width');
        var d_h = $('.box').css('height');
        var d_color = $('.box').css('backgroundColor');
        console.log('未设置宽度和高度的值：'+ d_w,d_h,d_color);
        // 设置样式
        $('.box').css('backgroundColor','aqua');
        
        // 获取宽度和高度
        var w = $('.box').width();
        var h = $('.box').height();
        console.log('未设置宽度和高度的值：',w,h);
        // 设置宽度和高度
        $('.box').width(200);
        $('.box').height(200);

        // 获取宽度，高度+padding
        var w_p = $('.box').innerWidth();
        var h_p = $('.box').innerHeight();
        console.log(w_p,h_p);

        // 获取宽度，高度+padding+border+选择性的margin
        // 参数没有，则默认是false,不选择添加margin,true则代表添加margin
        var w_b_m = $('.box').outerWidth(true);
        var h_b_m = $('.box').outerHeight(true);
        console.log(w_b_m,h_b_m);
    </script>
</body>
</html>

位置操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jQuery/jquery-3.6.0.min.js"></script>
    <style>
        /* 初始化位置 */
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 150px;
            height: 150px;
            background-color: aqua;
            position: relative;
            left: 100px;
            top: 10px;
        }
        .container {
            width: 300px;
            height: 300px;
            border: 2px solid red;
            position: relative;
            top: 200px;
            left: 500px;
        }
        .box1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .container1 {
            background: #CCCCCC;
            border: 3px solid #666666;
            margin: 5px;
            padding: 5px;
            width: 200px;
            height: 200px;
            overflow: auto;
       }
        p {
            margin: 10px;
            padding: 5px;
            border: 2px solid #666;
            width: 1000px;
            height: 1000px;
       }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="container">
        <div class="box1"></div>
    </div>
    <div class="container1">
        <p>起飞！~</p>
    </div>
    <script>
        // 获取位置信息
        var offset = $('.box').offset();
        console.log(offset);

        // 设置新的位置
        $('.box').offset({
            top:40,
            left:150
        });

        // 获取子标签相对于父标签的位置信息
        var offset_child = $('.box1').position();
        console.log(offset_child);

        // 设置滚动条位置，获取滚动条位置信息
        $('.container1').scrollTop(300);
        $('.container1').scrollLeft(300);
        var srcoll_t = $('.container1').scrollTop();
        var scroll_l = $('.container1').scrollLeft();
        console.log(srcoll_t,scroll_l);
    </script>
</body>
</html>