Laper 剧本策划到成片协作 updream 一键生成高质量推广成片 AniShort AI短剧协同制作平台剧云中文短剧剧本制作平台

PHP MySQL jquery HTML CSS

jQuery 教程 jQuery 效果 jQuery HTML jQuery 遍历 jQuery Ajax jQuery 其他 jQuery 实例 jQuery 参考手册 jQuery 插件

jQuery 教程 jQuery简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏和显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery - Chaining jQuery 捕获 jQuery - 设置 jQuery - 添加元素 jQuery - 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 遍历 - 后代 jQuery 同胞 jQuery 过滤 jQuery - AJAX 简介 jQuery load() 方法 jQuery - AJAX get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

jQuery 教程

jQuery 教程 jQuery简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件

jQuery 效果

jQuery 隐藏和显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery - Chaining

jQuery HTML

jQuery 捕获 jQuery - 设置 jQuery - 添加元素 jQuery - 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸

jQuery 遍历

jQuery 遍历 jQuery 祖先 jQuery 遍历 - 后代 jQuery 同胞 jQuery 过滤

jQuery Ajax

jQuery - AJAX 简介 jQuery load() 方法 jQuery - AJAX get()/post() 方法

jQuery 其他

jQuery noConflict() 方法 jQuery JSONP

jQuery 实例

jQuery 参考手册

jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性

jQuery 插件

jQuery Validate jQuery Accordion jQuery Autocomplete jQuery Message jQuery 密码验证 jQuery Prettydate jQuery Tooltip jQuery Treeview

jQuery中文参考手册

更新时间2022-04-12

jQuery css() 方法

jQuery 尺寸

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

jQuery 尺寸方法

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

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

jQuery 尺寸

jQuery width() 和 height() 方法

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

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

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

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 的宽度是: " + $("#div1").width() + "</br>";
    txt+="div 的高度是: " + $("#div1").height();
    $("#div1").html(txt);
  });
});
</script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>width() - 返回元素的宽度</p>
<p>height() - 返回元素的高度</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

下面的例子返回指定的 <div> 元素的 inner-width/height：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>innerWidth() - 返回元素的宽度 (包含内边距)。</p>
<p>innerHeight() - 返回元素的高度 (包含内边距)。</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

下面的例子返回指定的 <div> 元素的 outer-width/height：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>

<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jQuery css() 方法

相关视频

免费