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对象关系图 方便dom操作
Mar 18 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 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入门速成教程
2007/03/19 PHP
php生成随机字符串可指定纯数字、纯字母或者混合的
2014/04/18 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
php依赖注入知识点详解
2019/09/23 PHP
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
opencv python如何实现图像二值化
2020/02/03 Python
python中安装django模块的方法
2020/03/12 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
英国标准协会商店:BSI Shop
2019/02/25 全球购物
行政助理工作职责范本
2014/03/04 职场文书
银行办公室岗位职责
2014/03/10 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
设备技术员岗位职责
2015/04/11 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技