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. .NET生成静态页面的方案总结

    转载自:http://www.cnblogs.com/cuihongyu3503319/archive/2012/12/06/2804233.html 方法一:在服务器上指定aspx网页,生成html ...

  2. iOS开发中常见的问题

      1.重复调用2次loadView和viewDidLoad 最好不要在UIViewController的loadView方法中改变状态栏的可视性(比如状态栏由显示变为隐藏.或者由隐藏变为显示),因为 ...

  3. Python 安装mssql (Ubuntu)

    1. Python.h:没有那个文件或目录 apt-get install python-dev 2.sqlfront.h:没有那个文件或目录 apt-get install freetds-dev

  4. [转]C#开发ActiveX控件,.NET开发OCX控件案例

    引自:百度   http://hi.baidu.com/yanzuoguang/blog/item/fe11974edf52873aaec3ab42.html 讲下什么是ActiveX控件,到底有什么 ...

  5. 【iCore2双核心板视频教程三】iM_LAN 100M 以太网模块TCP压力测试（更新视频教程）

    ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee.cnblogs.com 官方网店:h ...

  6. memcached与spring

    key的生成规则 update 与 query 的参数不一样,如何让其生成一样的key 列表缓存如何定义key及失效 最近同事推荐了一个开源项目:Simple-Spring-Memcached(简称s ...

  7. 交叉报表列头排序时遇到的oracle问题—oracle ORA-12704:字符集不匹配、varchar2转化为nvarchar2字符缺失、case when else后的字符类型要一致

    在做交叉报表列头的排序时,遇到这三个问题,下面具体来说一下. 设计的数据库的表结构如图1所示: 图1 要处出来student_name_,s.grade_,s.subject_name_,这三个属性, ...

  8. Mininet实验 OpenFlow1.3协议基于Mininet部署与验证

    参照:OpenFlow1.3协议基于Mininet部署与验证 安装过程,参考原文. 实验 使用ifconfig查看本机IP地址:192.168.1.101 进入OpenDayLight界面,cd到bi ...

  9. Javascript 笔记与总结（1-2）词法分析

    词法分析,按顺序分析 3 样: 第 1 步:先分析参数 第 2 步:再分析变量声明 第 3 步:再分析函数声明 一个函数能使用的局部变量,就从上面 3 步分析而来. 具体步骤: 0:函数运行前的瞬间, ...

  10. lvs nginx HAProxy优缺点

    LVS的优点：1、抗负载能力强、工作在第4层仅作分发之用，没有流量的产生，这个特点也决定了它在负载均衡软件里的性能最强的；无流量，同时保证了均衡器IO的性能不会受到大流量的影响；2、工作稳定，自身有完 ...