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 学习笔记 选择器之三
Jul 23 Javascript
javascript 常见功能汇总
Jun 11 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解webpack引入第三方库的方式以及注意事项
Jan 15 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php 设计模式之 工厂模式
2008/12/19 PHP
关于svn冲突的解决方法
2013/06/21 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP实现自动发送邮件功能代码(qq 邮箱)
2017/08/18 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
JavaScript高级程序设计 读书笔记之十 本地对象Date日期
2012/02/27 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python入门篇之对象类型
2014/10/17 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
学生的自我鉴定范文
2013/10/24 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
学校联谊协议书
2014/09/16 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS