jquery尺寸:宽度与高度
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
$(document).width()与$(window).width()返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" href="css/all.css" /> 7 <style type="text/css"> 8 div { margin: 10px; padding: 10px; width: 300px; height: 200px; border: 10px solid #ccc; } 9 </style> 10 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 11 <script type="text/javascript" src="js/all.js"></script> 12 </head> 13 14 <body> 15 <div></div> 16 <div></div> 17 <div></div> 18 <div></div> 19 <div></div> 20 <div></div> 21 <div></div> 22 <div></div> 23 <div></div> 24 </body> 25 </html> 26 <script type="text/javascript"> 27 var s1 ='width()是' + $('div').width() +'px,因为width()不包含margin,padding,border'; 28 var s2 ='innerWidth()是' + $('div').innerWidth() +'px,因为包含了padding,左右各10px'; 29 var s3 ='outerWidth()是' + $('div').outerWidth() +'px,因为包含了padding(左右名10px)与border(左右名10px)'; 30 var s4 ='outerWidth(true)是' + $('div').outerWidth(true) +'px,包含了padding,margin,border,左右名10px'; 31 var s5 ='document文档的width()是' + $(document).width() +'px'; 32 var s6 ='window窗口的width()是' + $(window).width() +'px'; 33 alert(s1); 34 alert(s2); 35 alert(s3); 36 alert(s4); 37 alert(s5); 38 alert(s6); 39 alert('当没有垂直滚动条的时候,$(document).width()与$(window).width()在我的电脑上的宽度是1366,而在有垂直滚动条的时候,在我的电脑上的宽度是1349。并且当调整浏览器窗口的大小的时候,这两个值也会相应的发生变化。'); 40 </script>
转载于:https://www.cnblogs.com/darkterror/p/5007719.html
jquery尺寸:宽度与高度相关推荐
- 图片加尺寸php代码,php获取图片尺寸(宽度,高度)_php
本篇文章主要说明php获取图片尺寸(宽度,高度)的函数,即getimagesize()函数. 语法:array getimagesize( string filename [, array & ...
- php 获得图片大小,php获取图片尺寸(宽度,高度)
本篇文章主要说明PHP获取图片尺寸(宽度,高度)的函数,即getimagesize()函数. 语法:array getimagesize( string filename [, array & ...
- jQuery获取或设置元素的宽度和高度
jQuery获取或设置元素的宽度和高度: 可使用以下3种方法: 1,jQuery width() 和 height() 方法: 2,innerWidth() 和 innerHeight() 方法: 3 ...
- html自动图片尺寸,关于html:CSS背景图像适合宽度,高度应按比例自动缩放
我有 body { background: url(images/background.svg); } 期望的效果是该背景图像的宽度等于页面的宽度,高度变化以保持比例. 例如 如果原始图像恰好是100 ...
- jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html页面宽度和高度,页面布局宽度和高度 网页设计合适的页面尺寸是多少
首先打开一篇文档,在功能区选择"布局". 在布局的页面设置功能区,点击页面设置右下角的小按钮打开详细设置.页面设置里面有设置纸张大小的快捷设置,但是功能不全. word页面高度和宽 ...
- jQuery尺寸位置操作
jQuery 尺寸 语法 用法 width() / height() 取得匹配元素宽度和高度值 只算width / height innerWidth() / innerHieght() 取得匹配元素 ...
- jQuery第二天学习总结—— jQuery 尺寸、位置操作
jQuery 尺寸.位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下. jQuery 尺寸操作 jQuery 尺寸操作包括元素宽高的获取和设置,且不 ...
- 获取当前页面的宽度和高度
jQuery:获取当前打开页面的宽度和高度: var windowheight = $(window).height() - 20; var windowwidth = $(window).width ...
最新文章
- 私钥设置_私钥忘了怎么办,还能找回来吗?能
- 中班音乐 机器人教案_幼儿园中班音乐活动教案《机器人》
- NOJ 20 吝啬的国度
- Xilinx FPGA,“加速”视频质量提升
- 移动短信回执怎么开通_才知道移动积分需要主动开通功能,才会消费产生积分,垃圾!!!...
- 同样是Java程序员,如何比别人更优秀?
- 【无标题】写博客的第一天
- 赛锐信息:PM模块的几点看法
- python3x程序设计基础周元哲_Python 3 x程序设计基础
- Appium脚本(2):元素检测
- Java简介:Java是什么?及Java语言的特点
- 古墓丽影暗影显卡测试软件,决战古墓丽影暗影 畅玩需要什么显卡?
- 免费在线生成二维码网站,支持二维码自定义
- 由 hacked by 1byte 想到的,再说两句
- Spring Boot使用EasyExcel导入导出Excel
- matlab合成和弦,基于Matlab实现音乐识别与自动配置和声的功能.pdf
- Java项目:SSM在线二手图书交易商城网站平台
- Windows主机入侵痕迹排查办法
- 原生JavaScript的评分星星
- leetcode416. 分割等和子集
热门文章
- cad坐标提取插件_如何快速地将CAD里的坐标提取到Excel中?最简单的方法你知道吗?...
- android camera预览帧,android camera2处理每一帧并显示其预览
- java构造器构造方法_Java构造器(构造方法/constructor)
- deeplin显示安装空间不够_电视内存不够怎么办?一步到位来搞定
- NodeJS Stream(可读流、可写流) API解读
- el-input点击事件
- 一图看懂编程语言迁移模式:终点站是Python、Go、JS
- EasyUI的组件加载两次的问题
- oracle in查询 一直等待,学习笔记:Oracle awr 分析解决inactive transaction branch等待事件...
- HDOJ水题集合4:杂题