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 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
three.js实现圆柱体
Dec 30 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 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
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
nodejs教程之入门
2014/11/21 NodeJs
javascript生成随机数方法汇总
2015/11/12 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
JS库之Three.js 简易入门教程(详解之一)
2017/09/13 Javascript
Angular2 自定义表单验证器的实现方法
2018/12/14 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python数据拟合与广义线性回归算法学习
2017/12/22 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
详解Python sys.argv使用方法
2019/05/10 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
英国泰坦旅游网站:全球陪同游览,邮轮和铁路旅行
2016/11/29 全球购物
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
车间班组长岗位职责
2013/11/13 职场文书
2014的自我评价
2014/01/13 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
2015年双拥工作总结
2015/04/08 职场文书
结婚幸福感言
2015/08/01 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
员工升职自我评价
2019/03/26 职场文书
创业计划书之养殖业
2019/10/11 职场文书
Python基础之元组与文件知识总结
2021/05/19 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android