jquery innerheight/innerwidth,width/height,outerwidth/outerheight
2016-01-28 21:56
721 查看
w3c 标准
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的 <div> 元素的宽度和高度:
亲自试一试
innerHeight() 方法返回元素的高度(包括内边距)。
下面的例子返回指定的 <div> 元素的 inner-width/height:
亲自试一试
outerHeight() 方法返回元素的高度(包括内边距和边框)。
下面的例子返回指定的 <div> 元素的 outer-width/height:
亲自试一试
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
亲自试一试
亲自试一试
下面的例子设置指定的 <div> 元素的宽度和高度:
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); });
亲自试一试
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
实例
$("button").click(function(){ var txt=""; txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt+="Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
亲自试一试
jQuery - 更多的 width() 和 height()
下面的例子返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:实例
$("button").click(function(){ var txt=""; txt+="Document width/height: " + $(document).width(); txt+="x" + $(document).height() + "\n"; txt+="Window width/height: " + $(window).width(); txt+="x" + $(window).height(); alert(txt); });
亲自试一试
下面的例子设置指定的 <div> 元素的宽度和高度:
实例
$("button").click(function(){ $("#div1").width(500).height(500); });
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
相关文章推荐
- 巧用jquery实现提交(submit)表单时候验证文本框是否为空
- jquery中对CheckBox的操作
- 封装jQuery Validate扩展验证方法
- jQuery Validate验证框架详解
- Jquery中的bind(),live(),delegate(),on()绑定事件方式
- Jquery自定义扩展方法(一)
- jquery不能实时获取CKEDITOR值的问题
- jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件
- jquery 事件 多次绑定,多次触发,怎么清除历史绑定事件
- 10个超赞的jQuery图片滑块动画
- Jquery的promise对象
- DOM对象与jQuery对象判断是否存在区别
- jQuery 插件格式 规范
- jquery图片切换插件jquery.cycle.js参数详解
- 【转】HTML5 jQuery图片上传前预览
- jQuery对象和DOM对象互转
- JQuery取消和注册对象Click事件同时防止多播委托
- jQuery获取checkbox选中的值
- Jquery基础学习(一)
- jQuery的deferred对象详解