jQuery中innerWidth()方法用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery中innerWidth()方法用法。分享给大家供大家参考。具体分析如下:

获取第一个匹配元素内部区域宽度。
包括内补白(padding)、不包括边框border)。也就是说内部区域的宽度等于padding和border之和。
此方法对可见和隐藏元素均有效。
可以结合innerHeight()方法学习。

语法结构:

$(selector).innerWidth()

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

p{

  background-color:green;

  height:100px;

  width:200px;

  padding:10px;

  border:5px solid red;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("p").text($("p").innerWidth()) 

  }); 

}); 

</script>

</head>

<body>

<p>此处显示innerWidth数值</p>

<button>点击查看p的innerWidth</button>

</body>

</html>

以上代码可以将p元素的内部区域宽度写入元素本身内部。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
JS event使用方法详解
Apr 28 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
原生js写的放大镜效果
Aug 22 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
js时间查询插件使用详解
Apr 07 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 #Javascript
jQuery中innerHeight()方法用法实例
Jan 19 #Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
Javascript基础教程之argument 详解
Jan 18 #Javascript
Javascript基础教程之定义和调用函数
Jan 18 #Javascript
Javascript基础教程之break和continue语句
Jan 18 #Javascript
Javascript基础教程之for循环
Jan 18 #Javascript
You might like
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
详谈PHP面向对象中常用的关键字和魔术方法
2017/02/04 PHP
js获取变量
2006/08/24 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python编程入门的一些基本知识
2015/05/13 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
美国女孩服装购物网站:Justice
2017/03/04 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
如何进行Linux分区优化
2013/02/12 面试题
责任担保书范文
2014/05/21 职场文书
2015年世界环境日活动总结
2015/02/11 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
教师考核鉴定意见
2015/06/05 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书