jQuery 入门教程(18): 操作HTML元素的大小
来源:互联网 发布:数据分析师发展 编辑:程序博客网 时间:2024/06/05 05:58
jQuery 提供下面方法来控制HTML元素的大小:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
一般影响HTML元素 大小各部分的示意图如下所示:
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() 返回元素包括Padding的宽度,innerHeight()返回包括Padding的高度。
jquery的outerWidth()和 outerHeight()方法
outerWidth()返回包括 padding 和 border的宽度,outerHeight()返回包括padding 和 border的高度。
而outWidth(true)和 outHeight(true) 返回包括padding, border和margin的高度和宽度。
下面的例子设置指定
元素的宽度和高度:
- $("button").click(function(){
- $("#div1").width(500).height(500);
- });
0 0
- jQuery 入门教程(18): 操作HTML元素的大小
- jQuery 入门教程(18): 操作HTML元素的大小
- 操作HTML元素的大小
- jQuery 入门教程(17): 读写HTML元素的css 属性
- jQuery 入门教程(17): 读写HTML元素的css 属性
- jQuery操作HTML元素
- jquery操作html元素
- jQuery 操作动态加载的html 元素
- jQuery 入门教程(14): 添加HTML元素
- jQuery 入门教程(15): 删除HTML元素
- jQuery 入门教程(14): 添加HTML元素
- jQuery 入门教程(15): 删除HTML元素
- Jquery(第二操作html元素)
- jQuery 操作 html 元素的例子 (input/select/checkbox/radio)
- js & jquery 操作iframe中的HTML元素
- jQuery对象方法操作html元素内容
- jQuery的HTML操作
- 【HTML/JS,JQuery】JQuery操作iframe父页面与子页面的元素与方法
- VS快捷键和样式显示
- 编程一些心得
- 查询oracle比较慢的session和sql
- TextView及其子类
- [DNS]Punycode与中文互转
- jQuery 入门教程(18): 操作HTML元素的大小
- 正则表达式中的的向前匹配、向后匹配、负向前匹配、负向后匹配写法
- sql语句 not in语句使用注意点
- “高手”创始人自述:创业该如何试错,做出一款牛X的社交APP
- linux开发板tiny210V2修改IP
- jQuery 入门教程(19): jQuery UI 概述
- 新建swap交换分区步骤
- HDU 1128(水题)
- 关于windows的list view使用的两点经验