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事件的传递与冒泡处理
Dec 06 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
js浏览器html5表单验证
Oct 17 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
JS模拟超市简易收银台小程序代码解析
Aug 18 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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 判断常量,变量和函数是否存在
2009/04/26 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
Yii rules常用规则示例
2016/03/15 PHP
js获取变量
2006/08/24 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
js兼容火狐获取图片宽和高的方法
2015/05/21 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
python基于右递归解决八皇后问题的方法
2015/05/25 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python2.7安装图文教程
2018/03/13 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
土木工程专业本科生求职信
2014/10/01 职场文书
高中教师个人工作总结
2015/02/10 职场文书
毕业证明书
2015/06/19 职场文书
春节慰问简报
2015/07/21 职场文书
开学典礼校长致辞
2015/07/29 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
python pyhs2 的安装操作
2021/04/07 Python
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
Python matplotlib绘制雷达图
2022/04/13 Python