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异步提交表单代码分享
Mar 26 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
vue时间格式化实例代码
Jun 13 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
React应用中使用Bootstrap的方法
Aug 15 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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中DateTime的常用方法
2016/08/11 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
2013/12/16 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python之pexpect实现自动交互的例子
2019/07/25 Python
python将字母转化为数字实例方法
2019/10/04 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
大学应届毕业生求职信
2014/05/24 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
身份证丢失证明
2015/06/19 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Java设计模式中的命令模式
2022/04/28 Java/Android