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. [zt]给你的Mp4大换血，精选Touch里3年收集的900多首歌，"经典不忍去的""最新近流行的"，与你共享~~

    如果你是音乐爱好者: 这些歌, 请戴上耳机, 调大音量, 一个人听 ,全世界 都是你的!!!!! (一)这些歌很温暖,没有金属味,适合有阳光的午后,很悠闲... [Anaesthesia]Maximi ...

  2. PCL 1.4.0 VS 2010 Configuration

    Open VS2010, create a new project, then open Property Manager, double-click Microsoft.Cpp.win32.user ...

  3. Java主要有那几种文件类型，各自作用

    java提供了两类数据类型:基本类型,引用类型. 1.基本类型包括:boolean ,byte,char,int,short,float,long,double,值得注意的是:在原始数据类型中,除了b ...

  4. Html - 对话箭头

    对话箭头 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="U ...

  5. [办公自动化]利用Acrobat完成问卷调查或者考试卷

    整体思路:(软件环境Acrobat) 1.制作问卷. 采用word制作,制作基础页面,然后倒入.自己亲测时,发现一般的文字域是可以的,但是单选按钮就不能导入. 如果是考试卷,可以利用word制作基础页 ...

  6. DS实验题 Searchname

    题目: 思路: 如果直接暴力搜索的话,时间复杂度为O(n*m),在n为百万量级的情况下,必然是T. 所以,这里通过hash函数,将字符串转换为对应的hash值:同时利用邻接表避免了hash冲突,方法是 ...

  7. Mininet实验 基于Mininet实现BGP路径挟持攻击实验

    参考:基于Mininet实现BGP路径挟持攻击实验 实验目的: 掌握如何mininet内模拟AS. 掌握BGP路径挟持的原理和分析过程. 实验原理: 互联网是由相互连接的自治系统AS组成的,通过一个通 ...

  8. OpenFlow.p4 源码

    /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Version 2.0 (th ...

  9. VR制作的规格分析

    因为UE4的演示资源更丰富一些,我这边把UE4的有代表性的演示都跑了一遍,同时也通过Rift确认效果,和里面的资源制作方式.   首先,UE4是基于物理渲染的引擎,大部分都是偏向图像真实的.使用的材质 ...

  10. git的某些默认行为--会推送pull的内容，即使commit的时候不显示

    今天一不小心又在git上犯了个大错误,用gitflow之前进行过pull分支的操作,然后用IDE选择修改的文件提交,可是推送的时候把pull的内容也推送到远程服务器了,提交的时候用git status ...