通过 jQuery,很容易处理元素和浏览器窗口的尺寸。


jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

jQuery 尺寸


jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

下面的例子返回指定的 <div> 元素的宽度和高度:

实例

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

尝试一下 »


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);
});

尝试一下 »


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);
});

尝试一下

jQuery 尺寸的更多相关文章

  1. 实现文字自动横移--- jquery尺寸相关函数

    效果图: 一实现文字自动横移 <style type="text/css"> #demo {overflow:scroll;width:740px; } #indemo ...

  2. jQuery 基础(4)jQuery 尺寸

    jQuery 尺寸方法jQuery 提供多个处理尺寸的重要方法:width()height()innerWidth()innerHeight()outerWidth()outerHeight()jQu ...

  3. 关于jquery尺寸的总结

    以前总是对jquery的尺寸稀里糊涂,有需要的可以看下下面的代码: ①页面布局如下: <!doctype html> <html> <head> <meta ...

  4. jquery尺寸和jQuery设置和获取内容方法

    一.jquery尺寸 jQuery 提供多个处理尺寸的重要方法: width()    设置或返回元素的宽度(不包括内边距.边框或外边距),括号中可填数值宽度参数,无单位 height()   设置或 ...

  5. jQuery尺寸

    jQuery 尺寸 jQuery width() 和 height() 方法 width() 方法设置或返回元素的宽度(不包括内边距.边框或外边距). height() 方法设置或返回元素的高度(不包 ...

  6. jQuery尺寸算法

    我们默认都统一是采用offsetWidth或者offsetHeight取值了,但我们知道关于这2个尺寸的算法是这样的: offsetWidth = border-left-width + paddin ...

  7. 图解JQUERY尺寸及位置定义

    最近在学习JQUERY的一些应用,接触到了JQUERY对于元素尺寸及位置定义,还有就是配合浏览器尺 寸及状态的计算所做出的一些动画特效.其实像这类JQUERY应用无外乎涉及这些属性的调用:innerH ...

  8. jQuery 尺寸 方法

    jQuery 提供多个处理尺寸的重要方法: width() height() innerWidth() innerHeight() outerWidth() outerHeight()

  9. jquery——尺寸

    1. 获取和设置元素的尺寸 2. 获取元素相对页面的绝对位置:offset() 这种方式增加的盒子不会对之前的结构产生影响 demo: <!DOCTYPE html> <html l ...

随机推荐

  1. Design T-Shirt

    Design T-Shirt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  2. 使用VisualStudio进行单元测试之二

    借着工作忙的借口,偷了两天懒,今天继续单元测试之旅.前面说了如何进行一个最简单的单元测试,这次呢就跟大家一起来熟悉一下,在visual studio中如何进行数据驱动的单元测试. 开始之前先来明确一下 ...

  3. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  4. Bzoj 2346: [Baltic 2011]Lamp dijkstra,堆

    2346: [Baltic 2011]Lamp Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 428  Solved: 179[Submit][Sta ...

  5. 批处理at命令--一切尽在计划中

    让计算机在自己规定的时间里干自己规定的事,一切尽在计划之中.所以at命令你一定不能错过. 概述 列出在指定的时间和日期在计算机上运行的已计划命令或计划命令和程序,以及设置在指定时间和日期在计算机上运行 ...

  6. xls 和 xml 数据 排序 绑定 -原创

    xls 和 xml 排序 xml: <?xml version="1.0" encoding="UTF-8"?> <?xml-styleshe ...

  7. asp.net将本地Excel上传到服务器并把数据导入到数据库

    前台代码: <td class="formLabel"> 批量修改: </td> <td class="formInput"> ...

  8. 非常棒的jqChart图表插件

    由于项目需要,做一些类似于OA系统的应用时,表格用到的是最多的,那么图表展示就先显得尤为的重要,其中柱柱状图.折线图.饼状图又居多. 之前一直使用的是Chrome下的googleAPI中提供的char ...

  9. 开源的连接池技术DBCP和C3P0

    概述: Sun公司约定: 如果是连接池技术,需要实现一个接口! javax.sql.DataSource;   相关jar包和资料下载 1.1  DBCP连接池: l  DBCP 是 Apache 软 ...

  10. centos7 搭建 docker 环境

    1. 安装centos7  http://isoredirect.centos.org/centos/7/isos/x86_64/ 下载 everything 版本,最小化版本可能缺失很多东西 我是在 ...