jQuery中innerWidth()方法用法实例

本文实例讲述了jQuery中innerWidth()方法用法。分享给大家供大家参考。具体分析如下：

获取第一个匹配元素内部区域宽度。
包括内补白(padding)、不包括边框border)。也就是说内部区域的宽度等于padding和border之和。
此方法对可见和隐藏元素均有效。
可以结合innerHeight()方法学习。

语法结构:


代码如下:

$(selector).innerWidth()

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery中triggerHandler()方法用法实例

    本文实例讲述了jQuery中triggerHandler()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发被选元素的指定事件类型. 从上面定义可以看出此方法和trigger()方法功能上很类似,但还是有巨大区别.以下是主要区别: 1.此方法不会触发浏览器默认事件. 2.此方法触发jQuery对象集合中第一个元素的事件处理函数,不会产生事件冒泡. 3.此方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象. 语法结构: 复制代码 代码如下: $(selector).t

  • jQuery中trigger()方法用法实例

    本文实例讲述了jQuery中trigger()方法用法.分享给大家供大家参考.具体分析如下: 此方法触发匹配元素指定类型的事件. 语法结构一: 规定匹配元素被触发的事件类型. 复制代码 代码如下: $(selector).trigger(event,param1,param2,...) 参数列表: 参数 描述 event 规定指定元素要触发的事件. 可以是自定义事件(使用 bind() 函数来附加),或者任何标准事件. param 可选.传递到事件处理程序的额外参数. 额外的参数对自定义事件特别

  • jQuery的one()方法用法实例

    本文实例讲述了jQuery的one()方法用法.分享给大家供大家参考.具体分析如下: 为匹配元素的特定事件绑定一个一次性的事件处理方法. 在语法上one()方法和bind()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构: 复制代码 代码如下: $(selector).one(event,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery中outerHeight()方法用法实例

    本文实例讲述了jQuery中outerHeight()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部高度. 默认情况下外部高度是高度(height).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerWidth()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerHeight(options) 参数列表: 参

  • Javascript与jQuery方法的隐藏与显示

    示例代码很简单,直接奉上,就不多废话了 复制代码 代码如下: <html> <head> <title>denotoggle</title> <style> #box {     width: 100px;     height: 100PX;     background-color: #ddd } .show {     visibility: hidden; } </style> <script src="jqu

  • jQuery自定义添加"$"与解决"$"冲突的方法

    本文实例讲述了jQuery自定义添加"$"与解决"$"冲突的方法.分享给大家供大家参考.具体分析如下: 1.自定义添加$ 虽然jQuery很强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery提供了用户自定义添加"$"的方法. 代码如下: 复制代码 代码如下: $.fn.disable = function() {  return this.each(f

  • jQuery中offsetParent()方法用法实例

    本文实例讲述了jQuery中offsetParent()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素. 所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素. 此方法仅对可见元素有效. 语法结构: 复制代码 代码如下: $(selector).offsetParent() 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html>

  • jQuery中bind()方法用法实例

    本文实例讲述了jQuery中bind()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的特定事件绑定事件处理方法. 在语法上bind()方法和one()方法是一样的,它们的不同在于绑定的处理方法的执行次数. 语法结构一: 复制代码 代码如下: $(selector).bind(type,data,function) 参数列表: 参数 描述 type 定义绑定到匹配元素中的事件类型. 如果有多个事件使用空格分隔. data 可选.传递给事件对象的额外数据对象. function

  • jQuery中on()方法用法实例

    本文实例讲述了jQuery中on()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数. 使用off()方法可以删除on()方法绑定的事件. 语法结构一: 复制代码 代码如下: $(selector).on(events,[selector],[data],fn) 参数列表: 参数 描述 events 一个或多个用空格分隔的事件类型和可选的命名空间. selector 可选.一个选择器字符串,用以过滤选定的元素,该选择器的后裔元素将调用处理程序.

  • jQuery中outerWidth()方法用法实例

    本文实例讲述了jQuery中outerWidth()方法用法.分享给大家供大家参考.具体分析如下: 此方法获取第一个匹配元素外部宽度. 默认情况下外部高度是宽度(width).内补白(padding)和边框(border)之和. 如果参数设置为true的话,外补白(margin)尺寸也会算入外部宽度. 此方法对可见和隐藏元素均有效. 可以与outerHeight()方法结合学习. 语法结构: 复制代码 代码如下: $(selector).outerWidth(options) 参数列表: 参数

随机推荐