jQuery学习教程十七: jQuery
来源:互联网 发布:摄影器材入门 知乎 编辑:程序博客网 时间:2024/06/05 05:15
通过 jQuery,很容易处理元素和浏览器窗口的尺寸。
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
下面的例子返回指定的 <div> 元素的宽度和高度:
实例
<!DOCTYPE html><html><head><script src="/jquery/jquery-1.11.1.min.js"></script><script>$(document).ready(function(){ $("button").click(function(){ var txt=""; txt+="Width of div: " + $("#div1").width() + "</br>"; txt+="Height of 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:
实例
$("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);});
0 0
- jQuery学习教程十七: jQuery
- jQuery学习 一 jQuery 教程
- jQuery学习教程十: jQuery
- jQuery学习教程十一: jQuery
- jQuery学习教程十二: jQuery
- jQuery学习教程十三: jQuery
- jQuery学习教程十四: jQuery
- jQuery学习教程十五: jQuery
- jQuery学习教程十六: jQuery
- 怎样学习jQuery,jQuery学习教程
- JS(十七)jquery
- jQuery学习教程一: jQuery语法实例
- jQuery学习教程二:jQuery选择器
- jQuery学习教程三:jQuery 事件
- jQuery学习教程四:jQuery 效果
- jQuery学习教程五:jQuery 效果
- jQuery学习教程六: jQuery 效果
- jQuery学习教程七: jQuery 效果
- Android 动画
- 使用Git 总结-msysGit与GitHub 使用
- dir 遍历文件
- LoadRunner安装破解问题
- 华为OJ称砝码
- jQuery学习教程十七: jQuery
- Android 5.0中使用JobScheduler 调度作业
- Ubuntu 16.04 安装最新版本wine
- shell中的${}
- 读书笔记 《算法导论》 C6、7、8
- MYSQL数据库设计规范与原则
- Faster Input for Java
- 舵式导航JPTabBar
- CSS3 转换、过渡和动画