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. 使用新的AppleID更新Xcode

    为了免下载安装Xcode,安装时使用了别人提供的Xcode.dmg安装,而非使用自己账号在AppStore下载的. 这样的安装模式会出现一个问题,更新Xcode时AppStroe会提示让你输入下载该X ...

  2. 用openGL实现用黑白相间的棋盘图案填充多边形

    #include<gl/glut.h> #include<windows.h> ; ,b0=,a1=,b1=,a2=,b2=,a3=,b3=; ,winHeight=; voi ...

  3. APP UI设计相关的一些链接

    安卓app设计规范整理和Android APP设计篇 http://www.25xt.com/appdesign/6536.html APP UI面试题:iOS和安卓的ui设计有什么区别 http:/ ...

  4. ondragover 事件规定在何处放置被拖动的数据

    nternet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 被拖元素,dragElement : 1.添加事件:ondragstart 2 ...

  5. mongodb复制集配置

    #more /opt/mongodb3.0/mongodb_im_conf_47020/mongodb3.0_im_47020.cnf dbpath = /opt/mongodb3.0/mongodb ...

  6. NBOJv2 1034 Salary Inequity（DFS序+线段树区间更新区间（最值）查询）

    Problem 1034: Salary Inequity Time Limits:  10000 MS   Memory Limits:  200000 KB 64-bit interger IO ...

  7. MyBatis之传入参数

    在MyBatis的select.insert.update.delete这些元素中都提到了parameterType这个属性.MyBatis现在可以使用的parameterType有基本数据类型和Ja ...

  8. Python操作MySQL以及中文乱码的问题

    Python操作MySQL需要安装Python-MySQL可以从网上搜索一下,和一般的Python包一样安装 安装好之后,模块名字叫做MySQLdb ,在Window和Linux环境下都可以使用,试验 ...

  9. ArcGIS Server 服务迁移、恢复

    服务迁移与恢复 如果服务可以迁移,那么备份迁移所需文件,即可恢复原服务,所以"服务的迁移与恢复"."服务的备份"问题可以汇总为一个问题"怎样迁移服务. ...

  10. Spring IoC反转控制的快速入门

    * 下载Spring最新开发包 * 复制Spring开发jar包到工程 * 理解IoC反转控制和DI依赖注入 * 编写Spring核心配置文件 * 在程序中读取Spring配置文件,通过Spring框 ...