jQuery 尺寸

2024-01-05 00:28| 来源: 网络整理| 查看: 265

w3school 在线教程 HTML 系列教程浏览器脚本服务器脚本编程教程 XML 系列教程建站手册参考手册 jQuery 教程 jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 效果 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery stop() jQuery Callback jQuery Chaining jQuery HTML jQuery 获取 jQuery 设置 jQuery 添加 jQuery 删除 jQuery CSS 类 jQuery css() jQuery 尺寸 jQuery 遍历 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX jQuery AJAX 简介 jQuery 加载 jQuery Get/Post jQuery 杂项 jQuery noConflict() jQuery 实例 jQuery 实例 jQuery 测验 jQuery 参考手册 jQuery 参考手册 jQuery 选择器 jQuery 事件 jQuery 效果 jQuery 文档操作 jQuery 属性操作 jQuery CSS 操作 jQuery Ajax jQuery 遍历 jQuery 数据 jQuery DOM 元素 jQuery 核心 jQuery 属性 jQuery 尺寸 jQuery css() jQuery 遍历

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸方法

jQuery 提供多个处理尺寸的重要方法：

width() height() innerWidth() innerHeight() outerWidth() outerHeight() jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

下面的例子返回指定的元素的宽度和高度：

实例 $("button").click(function(){ var txt=""; txt+="Width: " + $("#div1").width() + ""; txt+="Height: " + $("#div1").height(); $("#div1").html(txt); });

亲自试一试

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的元素的 inner-width/height：

实例 $("button").click(function(){ var txt=""; txt+="Inner width: " + $("#div1").innerWidth() + ""; txt+="Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); });

亲自试一试

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的元素的 outer-width/height：

实例 $("button").click(function(){ var txt=""; txt+="Outer width: " + $("#div1").outerWidth() + ""; txt+="Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); });

亲自试一试

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

实例 $("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + ""; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });

亲自试一试

jQuery - 更多的 width() 和 height()

下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：

实例 $("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });

亲自试一试

下面的例子设置指定的元素的宽度和高度：

实例 $("button").click(function(){ $("#div1").width(500).height(500); });

亲自试一试

jQuery CSS 参考手册

如需关于 jQuery Dimensions 的完整参考，请访问我们的 jQuery 尺寸参考手册。

jQuery css() jQuery 遍历 jQuery 参考手册 jQuery 测验

关于 W3School 帮助 W3School 使用条款隐私条款技术支持：赢科蒙ICP备06004630号

【本文地址】

jQuery 尺寸

jQuery 尺寸

今日新闻

推荐新闻