jQuery中offsetParent()方法用法实例


Posted in Javascript onJanuary 19, 2015

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

此方法可以返回匹配元素所有祖先元素中第一个采用定位的祖先元素。
所谓采用定位的父元素就是施加position:relative或者position:absolute(fixed)的元素。
此方法仅对可见元素有效。

语法结构:

$(selector).offsetParent()

代码实例:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>offsetParent()函数-三水点靠木</title> 

<style type="text/css"> 

.grandfather

{

  width:200px;

  height:200px;

  background-color:red;

  position:relative;

}

.father

{

  width:150px;

  height:150px;

  background-color:blue;

}

.children

{

  width:50px;

  height:50px;

  background-color:green;

}

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){

    $(".children").offsetParent().css("backgroundColor","yellow"); 

  }) 

}) 

</script> 

</head> 

<body>

<div class="grandfather"> 

<div class="father"> 

  <div class="children"></div> 

</div> 

</div>

<button>查看效果</button> 

</body> 

</html>

以上代码可以将children元素中所有祖先元素中,第一个采用定位的祖先元素的背景颜色设置为红色。

希望本文所述对大家的jQuery程序设计有所帮助。

本文转自:蚂蚁部落http://www.softwhy.com/

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
Javascript中的数学函数集合
May 08 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jquery validate表单验证插件
Sep 06 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
echarts设置图例颜色和地图底色的方法实例
Aug 01 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
webpack4 optimization使用总结
Nov 10 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
javascript数据类型示例分享
Jan 19 #Javascript
jQuery中outerHeight()方法用法实例
Jan 19 #Javascript
jQuery中innerWidth()方法用法实例
Jan 19 #Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 #Javascript
jQuery中innerHeight()方法用法实例
Jan 19 #Javascript
Javascript基础教程之函数对象和属性
Jan 18 #Javascript
You might like
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP XML操作类DOMDocument
2009/12/16 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
PHP数据类型之布尔型的介绍
2013/04/28 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
动态控制Table的js代码
2007/03/07 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
同时安装Python2 &amp; Python3 cmd下版本自由选择的方法
2017/12/09 Python
Python 元类实例解析
2018/04/04 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
大学生就业自我鉴定
2013/10/26 职场文书
实习自我鉴定范文
2013/10/30 职场文书
简历自荐信
2013/12/02 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
总经理司机岗位职责
2015/04/10 职场文书
2015年保管员工作总结
2015/04/30 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL