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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
jQuery实现元素的插入
Feb 27 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 Javascript
vue 查看dist文件里的结构(多种方式)
Jan 17 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
遍历指定目录下的所有目录和文件的php代码
2011/11/27 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
Javascript图像处理思路及实现代码
2012/12/25 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
Python中qutip用法示例详解
2020/10/02 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
小学四年级作文之写景
2019/08/23 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL