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操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
Node.js文件操作详解
Aug 16 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
详解Vue单元测试case写法
May 24 Javascript
layui table 参数设置方法
Aug 14 Javascript
Node.js 多线程完全指南总结
Mar 27 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
Feb 10 Javascript
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
Jun 09 Vue.js
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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
深入了解php4(2)--重访过去
2006/10/09 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
浅谈JavaScript的innerWidth与innerHeight
2017/10/12 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
回顾Javascript React基础
2019/06/15 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
python字典排序实例详解
2015/05/20 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
pytorch masked_fill报错的解决
2020/02/18 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Ajax和javascript的区别
2013/07/20 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
模具毕业生推荐信
2014/02/15 职场文书
2014年预备党员学习两会心得体会
2014/03/17 职场文书
商务考察邀请函模板
2015/02/02 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
2015年社区平安建设工作总结
2015/05/13 职场文书
民事申诉状范本
2015/05/20 职场文书
Java中生成微信小程序太阳码的实现方案
2022/06/01 Java/Android