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 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
JavaScript的==运算详解
Jul 20 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
Vue组件和Route的生命周期实例详解
Feb 10 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
布同自制Python函数帮助查询小工具
2011/03/13 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python代码中怎么换行
2020/06/17 Python
美国女性奢华品牌精品店:INTERMIX
2017/10/12 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
英国最大的在线照明商店:Litecraft
2020/08/31 全球购物
综合实践教学反思
2014/01/31 职场文书
升学宴主持词
2014/04/02 职场文书
2014物价局民主生活会对照检查材料思想汇报
2014/09/24 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
就业证明函
2015/06/17 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android