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版本A*寻路算法
Dec 22 Javascript
基于jquery的button默认enter事件(回车事件)。
May 18 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
JavaScript中的ubound函数使用实例
Nov 04 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
Jun 21 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php调整服务器时间的方法
2015/04/03 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python如何删除列为空的行
2020/07/17 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
农林环境专业求职信
2014/03/13 职场文书
保密承诺书
2014/03/27 职场文书
优秀家长事迹材料
2014/05/17 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js