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中属性过滤选择器用法实例分析
May 18 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
jQuery在ie6下无法设置select选中的解决方法详解
Sep 20 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
Nov 29 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
global.php
2006/12/09 PHP
PHP 递归效率分析
2009/11/24 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
PHP实现简单登录界面
2019/10/23 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
pip安装python库的方法总结
2019/08/02 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Servlet如何得到服务器的信息
2015/12/22 面试题
研究生求职推荐信范文
2013/11/30 职场文书
工作失职检讨书范文
2014/01/16 职场文书
保险公司晨会主持词
2014/03/22 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
Python实现单例模式的5种方法
2021/06/15 Python