JQuery:尺寸

介绍：
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery 提供多个处理尺寸的重要方法：width()、height()、innerHeight()、outerWidth()、outerHeight()

模型：

演练：
1、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 lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //显示div元素高和宽

            $("button").click(function(){

                var txt = "";

                txt += "Width:" + $("#div1").width() + "<br>";

                txt += "Height:" + $("#div1").height();

                $("#div1").html(txt);

            });

        });

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:100px;background-color:red"></div>

    <button>显示div元素高和宽</button>

    <p>width()：元素的宽</p>

    <p>height()：元素的高</p>

</body>

</html>

 

2、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);
});
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //显示div元素尺寸

            $("button").click(function(){

                var txt = "";

                txt += "Width:" + $("#div1").innerWidth() + "<br>";

                txt += "Height:" + $("#div1").innerHeight();

                $("#div1").html(txt);

            });

        });

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:100px;padding:10px;margin:3px;background-color:red"></div>

    <button>显示div元素尺寸</button>

    <p>innerWidth() - 返回元素的宽度 (包含内边距)</p>

    <p>innerHeight() - 返回元素的高度 (包含内边距)</p>

</body>

</html>

 

3、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);
});
代码如下：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>JQuery的使用！！！</title>

    <script src="jquery-3.1.0.js"></script>

    <script>

        $(document).ready(function(){

            //显示div元素尺寸

            $("button").click(function(){

                var txt = "";

                txt += "Width:" + $("#div1").outerWidth() + "<br>";

                txt += "Height:" + $("#div1").outerHeight();

                $("#div1").html(txt);

            });

        });

    </script>

</head>

<body>

    <div id="div1" style="width:200px;height:100px;padding:10px;margin:3px;border:1px solid green;background-color:red"></div>

    <button>显示div元素尺寸</button>

    <p>outerWidth() - 返回元素的宽度 (包括内边距和边框)</p>

    <p>outerHeight() - 返回元素的高度 (包括内边距和边框)</p>

</body>

</html>

 

JQuery：JQuery的尺寸的更多相关文章

  1. 什么是jquery $ jQuery对象和DOM对象 和一些选择器

    1什么是jQuery: jQuery就是将一些方法封装在一个js文件中.就是个js库 我们学习这些方法. 2为什么要学习jQuery: 原生js有以下问题: 1.兼容性问题2.代码重复3.DOM提供的 ...

  2. (转)整体把握jQuery -jQuery 的原型关系图

    整体把握jQuery -jQuery 的原型关系图 (原)http://www.html5cn.org/article-6529-1.html 2014-7-2 17:12| 发布者: html5cn ...

  3. jQuery: jquery.json.js

    http://api.jquery.com/jQuery.parseJSON/ http://www.json.org/json-zh.html http://fineui.codeplex.com/ ...

  4. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

  5. jQuery中的尺寸及位置的取和设

    1.offset(); 获取位置值: $(selector).offset().left; $(selector).offset().top; 设置位置值: $(selector).offset({t ...

  6. jquery 操作css 尺寸

    .height() 获取元素集合中的第一个元素的当前计算高度值,或设置每一个匹配元素的高度值. .height() 获取匹配元素集合中的第一个元素的当前计算高度值. 这个方法不接受参数. $(wind ...

  7. jQuery的相关尺寸获取 - 学习笔记

    获取元素相对于文档的偏移量 获取当前元素相对于父级元素的偏移量 获取文档滚动距离 获取元素的宽度和高度 设置元素的宽度和高度 获取可视区域的宽度和高度 获取文档的宽度和高度 获取元素相对于文档的偏移量 ...

  8. jquery Jquery 遍历 获取设置 效果

    speed: slow fast 毫秒 隐藏 显示 $(selector).hide(speed,callback) 隐藏. $(selector).show(speed,callback) 显示 $ ...

  9. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  10. jQuery jQuery对象与dom对象的转换

    jQuery对象本质上是一个构造函数,主要作用是返回jQuery对象的实例. jQuery选择器返回的是一个类似数组的对象,用下标运算取出的对象如$('body')[0],是dom对象,对此jquer ...

随机推荐

  1. ibatis插入数据返回ID的方法

    ibatis插入数据返回ID的方法 主要就是利用seelctkey来获取这个ID值,但是oracle和mysql的区别还是很大的 oracle的用法 <insert id="inser ...

  2. ITK 3.20.1 VS2010 Configuration 配置

    Download ITK 3.20.1 Download VS2010 Download CMake 3.2.0 I assume you've already installed VS2010 an ...

  3. [ZT] 几大酒店集团美国Co-Brand信用卡比较（三）如何选择最适合你的酒店联名信用卡

    原文地址: http://www.3798.com/archives/596.html 接着对我们这种不是某个酒店忠诚客户的用户选择卡片进行分析.首先要强调的是,我们比较的是信用卡项目本身,而不是酒店 ...

  4. 使用LTT升级HP磁带机的固件程序

    下载后将软件包解压 解压后,进入该文件夹可以看到固件程序     将所有固件程序拷贝至LTT软件安装目录下的firmware文件夹中 C:\Program Files\HP StorageWorks ...

  5. Educational Codeforces Round 15 C. Cellular Network（二分）

    C. Cellular Network time limit per test 3 seconds memory limit per test 256 megabytes input standard ...

  6. linux查看时间和修改时间

    查看当前时间,date -R 设置时间 date -s 例如当前时间2014年11月3日17:22:48 date -s 11/3/2014 date -s 17:22:48 先设置日期后设置具体时间 ...

  7. FZU 2028 BFS+vector

    一个普通的bfs 如果不看样例和input的解释... 四个0真是神样例 又被input误导 以为每个点都按顺序有标号 传送门的终点给的是一个点的标号 然后结果是什么呢?无尽的runtime erro ...

  8. Visual Studio解决方案及项目的配置

    配置解决方案的属性 1.配置解决方案平台,该配置实际上修改的是解决方案目录下的sln(solution)文件. 配置项目的属性 1.配置项目平台及项目的目标平台:项目-右键-属性-生成(竖着第二个选项 ...

  9. anti-pattern - Hard coding

    https://en.wikipedia.org/wiki/Hard_coding Considered an anti-pattern, hard coding requires the progr ...

  10. 浏览器cookie数

    <?php for ($w=0; $w < 200 ; $w++) { setcookie('name'.$w,'value'.$w, time()+3600*10 ); } var_du ...