程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • jQuery

    • jQuery 入门
    • jQuery 选择器
    • jQuery 样式操作
    • jQuery 效果
    • jQuery 属性操作
    • jQuery 文本属性值操作
    • jQuery 元素操作
    • jQuery 尺寸、位置操作
      • 1. jQuery 尺寸
        • 1-1 width() 方法
        • 1-2 height() 方法
        • 1-3 innerWidth() 方法
        • 1-4 innerHeight() 方法
        • 1-5 outerWidth() 方法
        • 1-6 outerHeight() 方法
      • 2. jQuery 位置
        • 2-1 offset() 方法
        • 2-2 position() 方法
        • 2-3 scrollTop() 和 scrollLeft() 方法
      • 3. 综合示例
    • jQuery 事件
    • jQuery 其他方法
  • jQuery
  • jQuery
scholar
2024-07-24
目录

jQuery 尺寸、位置操作

# jQuery 尺寸、位置操作

jQuery 提供了一些方法来获取和设置元素的尺寸和位置。这些方法非常有用,特别是在动态布局和动画效果中。

# 1. jQuery 尺寸

jQuery 尺寸方法

# 1-1 width() 方法

  • 语法:

    元素.width() // 获取元素的宽度
    元素.width(数值) // 设置元素的宽度
    
    1
    2

    说明:

    • 参数为空时,返回元素的宽度,返回值是一个数字(不包含单位)。
    • 参数为数值时,设置元素的宽度,数值可以不带单位,默认为像素。

# 1-2 height() 方法

  • 语法:

    元素.height() // 获取元素的高度
    元素.height(数值) // 设置元素的高度
    
    1
    2

    说明:

    • 参数为空时,返回元素的高度,返回值是一个数字(不包含单位)。
    • 参数为数值时,设置元素的高度,数值可以不带单位,默认为像素。

# 1-3 innerWidth() 方法

  • 语法:

    元素.innerWidth() // 获取元素的内宽度(包括 padding)
    
    1

    说明:

    • 返回元素的内宽度,包含 padding。

# 1-4 innerHeight() 方法

  • 语法:

    元素.innerHeight() // 获取元素的内高度(包括 padding)
    
    1

    说明:

    • 返回元素的内高度,包含 padding。

# 1-5 outerWidth() 方法

  • 语法:

    元素.outerWidth(包含边距) // 获取元素的外宽度
    
    1

    说明:

    • 参数为 true 时,返回元素的外宽度,包含 padding 和 border 以及 margin。

# 1-6 outerHeight() 方法

  • 语法:

    元素.outerHeight(包含边距) // 获取元素的外高度
    
    1

    说明:

    • 参数为 true 时,返回元素的外高度,包含 padding 和 border 以及 margin。

# 2. jQuery 位置

位置操作主要包括 offset()、position() 和 scrollTop()/scrollLeft() 方法。

# 2-1 offset() 方法

  • 语法:

    元素.offset() // 获取元素的偏移坐标
    元素.offset({ top: 数值, left: 数值 }) // 设置元素的偏移坐标
    
    1
    2

    说明:

    • offset() 方法返回元素相对于文档的偏移坐标。
    • 返回值包含两个属性 top 和 left。
    • 可以通过传递一个对象来设置元素的偏移坐标。

    示例:

    // 获取元素的偏移坐标
    var offset = $("div").offset();
    console.log("Top: " + offset.top + ", Left: " + offset.left);
    
    // 设置元素的偏移坐标
    $("div").offset({ top: 10, left: 30 });
    
    1
    2
    3
    4
    5
    6

# 2-2 position() 方法

  • 语法:

    元素.position() // 获取元素的相对偏移坐标
    
    1

    说明:

    • position() 方法返回元素相对于其带有定位的父元素的偏移坐标。
    • 如果父元素没有定位,则以文档为准。
    • 返回值包含两个属性 top 和 left。
    • 该方法只能获取偏移坐标,不能设置。

    示例:

    // 获取元素的相对偏移坐标
    var position = $("div").position();
    console.log("Top: " + position.top + ", Left: " + position.left);
    
    1
    2
    3

# 2-3 scrollTop() 和 scrollLeft() 方法

  • 语法:

    元素.scrollTop() // 获取元素被卷去的头部
    元素.scrollTop(数值) // 设置元素被卷去的头部
    元素.scrollLeft() // 获取元素被卷去的左侧
    元素.scrollLeft(数值) // 设置元素被卷去的左侧
    
    1
    2
    3
    4

    说明:

    • scrollTop() 方法返回或设置元素被卷去的头部高度。
    • scrollLeft() 方法返回或设置元素被卷去的左侧宽度。
    • 参数为空时,返回对应的数值。
    • 参数为数值时,设置对应的值。

    示例:

    // 获取元素被卷去的头部
    var scrollTop = $("div").scrollTop();
    console.log("Scroll Top: " + scrollTop);
    
    // 设置元素被卷去的头部
    $("div").scrollTop(100);
    
    // 获取元素被卷去的左侧
    var scrollLeft = $("div").scrollLeft();
    console.log("Scroll Left: " + scrollLeft);
    
    // 设置元素被卷去的左侧
    $("div").scrollLeft(100);
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

# 3. 综合示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 尺寸和位置操作示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 20px;
            padding: 10px;
            border: 2px solid #000;
            overflow: auto;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // 获取和设置元素的宽度
            console.log("Width: " + $(".box").width());
            $(".box").width(250);
            
            // 获取和设置元素的高度
            console.log("Height: " + $(".box").height());
            $(".box").height(250);

            // 获取元素的内宽度和内高度
            console.log("Inner Width: " + $(".box").innerWidth());
            console.log("Inner Height: " + $(".box").innerHeight());

            // 获取元素的外宽度和外高度(包含 margin)
            console.log("Outer Width (with margin): " + $(".box").outerWidth(true));
            console.log("Outer Height (with margin): " + $(".box").outerHeight(true));

            // 获取和设置元素的偏移坐标
            var offset = $(".box").offset();
            console.log("Offset - Top: " + offset.top + ", Left: " + offset.left);
            $(".box").offset({ top: 100, left: 100 });

            // 获取元素的相对偏移坐标
            var position = $(".box").position();
            console.log("Position - Top: " + position.top + ", Left: " + position.left);

            // 获取和设置元素被卷去的头部和左侧
            var scrollTop = $(".box").scrollTop();
            console.log("Scroll Top: " + scrollTop);
            $(".box").scrollTop(50);

            var scrollLeft = $(".box").scrollLeft();
            console.log("Scroll Left: " + scrollLeft);
            $(".box").scrollLeft(50);
        });
    </script>
</head>
<body>
    <div class="box">
        <p>这是一个带有滚动条的盒子。滚动内容滚动内容滚动内容滚动内容滚动内容滚动内容滚动内容滚动内容滚动内容。</p>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08
jQuery 元素操作
jQuery 事件

← jQuery 元素操作 jQuery 事件→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式