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 imgareaselect 使用利用js与程序结合实现图片剪切
Jul 30 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
Easyui的组合框的取值与赋值
Oct 28 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
php实现session共享的实例方法
2019/09/19 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
vue axios用法教程详解
2017/07/23 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
微信小程序之GET请求的实例详解
2017/09/29 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
基于python3生成标签云代码解析
2020/02/18 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
党员公开承诺践诺书
2014/03/25 职场文书
青春奉献演讲稿
2014/05/08 职场文书
习总书记三严三实学习心得体会
2014/10/13 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
社区敬老月活动总结
2015/05/07 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
奖学金主要事迹范文
2015/11/04 职场文书