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. linux系统tomcat启动正常访问不到主页面

    环境: linux系统 tomcat 6.0.24 jdk 1.6 防火墙的问题: 查看防火墙命令:chkconfig --list | grep -i iptables 关闭防火墙命令:/sbin/ ...

  2. 如何用Apache POI操作Excel文件-----如何在已有的Excel文件中插入一行新的数据？

    在POI的第一节入门中,我们提供了两个简单的例子,一个是如何用Apache POI新建一个工作薄,另外一个例子是,如果用Apache POI新建一个工作表.那么在这个章节里面,我将会给大家演示一下,如 ...

  3. 将JsonObject转换成HashMap

    1.工具类: Utils.class: (1)简单的键值对map public class Utils { public static String getRaw(Context context, i ...

  4. redis hash怎么用

    public static void testHsh() { System.out.println("==Hash=="); Jedis jedis = RedisUtil.get ...

  5. Bootstrap页面布局24 - BS旋转木马功能

    代码: <div class='container-fluid'> <h3 class='page-header'>Bootstrap 旋转木马</h3> < ...

  6. 20145317彭垚 《Java程序设计》第7周学习总结

    20145317彭垚 <Java程序设计>第7周学习总结 教材学习内容总结 第十三章 时间与日期 13.1.1 时间的度量·即使标注为GMT(格林威治时间),实际上谈到的的是UTC(Uni ...

  7. rsync安装及配置

    一.Server端 CentOS 6下安装yum -y install xinetd1.配置:vi /etc/xinetd.d/rsyncservice rsync{    disable = yes ...

  8. PHP学习(三)----面向对象

    首先,还是建立一个好的理解模型: 1.什么是面向对象? 面向对象分为两个部分,那就是:什么是对象和什么是面向? 什么是对象: 对象的出现就是为了用代码更好的绘制我们现有的世界.那到底什么是对象呢? 一 ...

  9. php-fpm

    install php-fpm # Ubuntu sudo apt-get install python-software-properties; sudo add-apt-repository pp ...

  10. 浮动以后父DIV包不住子DIV解决方案

    转载自http://blog.sina.com.cn/s/blog_6c363acf0100v4cz.html 当DIV1里面嵌套有一个DIV2,当DIV2设置了浮动,那么DIV1是无法被撑开的,也就 ...