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去空格处理方法
Nov 18 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jquery预加载图片的方法
May 27 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
原生JavaScript实现Ajax的方法
Apr 07 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 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中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php对数组排序的简单实例
2013/12/25 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php中count获取多维数组长度的方法
2014/11/03 PHP
php ci 获取表单中多个同名input元素值的代码
2016/03/25 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
详解vue express启动数据服务
2017/07/05 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python逐行读取文件中内容的简单方法
2019/02/26 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
Python识别验证码的实现示例
2020/09/30 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
深入CSS3 动画效果的总结详解
2013/05/09 HTML / CSS
详解HTML5中的标签
2015/06/19 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
政府个人对照检查材料
2014/08/28 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2015小学师德工作总结
2015/07/21 职场文书
PyTorch的Debug指南
2021/05/07 Python