18. jQuery - 尺寸

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

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

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 < div> 元素的宽度和高度：
实例

$("button").click(function(){var txt="";txt+="Width: " + $("#div1").width() + "</br>";txt+="Height: " + $("#div1").height();$("#div1").html(txt);
});

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){$("button").click(function(){var txt="";txt+="Width of div: " + $("#div1").width() + "</br>";txt+="Height of div: " + $("#div1").height();$("#div1").html(txt);});
});
</script>
</head>
<body><div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p></body>
</html>

jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 < div> 元素的 inner-width/height：
实例

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

jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 < div> 元素的 outer-width/height：
实例

$("button").click(function(){var txt="";txt+="Outer width: " + $("#div1").outerWidth() + "</br>";txt+="Outer height: " + $("#div1").outerHeight();$("#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);
});

18. jQuery - 尺寸相关推荐

Web全栈~18.jQuery
Web全栈~18.jQuery 上一期 jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装.jQuery将常用的.复杂的操作进行函数化封装,直接调用,大大降低了使用J ...
jQuery尺寸位置操作
jQuery 尺寸语法用法 width() / height() 取得匹配元素宽度和高度值只算width / height innerWidth() / innerHieght() 取得匹配元素 ...
jQuery第二天学习总结—— jQuery 尺寸、位置操作
jQuery 尺寸.位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置,且不 ...
jquery尺寸：宽度与高度
width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包括内边距.边框或外边距). innerWidth() 方法返回元素的宽度(包括 ...
jQuery - 获取并设置 CSS 类、尺寸
jQuery - 获取并设置 CSS 类通过 jQuery,可以很容易地对 CSS 元素进行操作. jQuery 拥有若干进行 CSS 操作的方法: addClass() - 向被选元素添加一个或多 ...
Jquery复习（七）之尺寸
jQuery 尺寸方法 jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHei ...
18款 jQuery UI框架
1.jQuery的界面插件 Ninja UI Query 是一个非常优秀的 JavaScript 框架,而且还有相当多的插件.其中的一些UI插件也相当的给力,比如 Ninja UI,是一款界面插件,使 ...
jQuery元素操作和尺寸位置
1. 遍历元素 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF ...
jQuery：设置获取属性、遍历添加删除元素、尺寸、位置
目录一.设置或获取元素属性值 1.设置或获取元素固有属性值 2.设置或获取元素自定义属性值attr() 3.数据缓存data() 二.获取元素内容三.jQuery对元素操作 1.遍历元素 2.创建 ...
jQuery学习笔记系列（二）
day02 - jQuery 学习目标: 能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸.位置 1.1. jQuery 属性操作 jQuery 常用属 ...

18. jQuery - 尺寸

18. jQuery - 尺寸相关推荐

最新文章

热门文章