offset大家族(一)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>offset大家族</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
.grandpa{
margin-left:50px;
width:500px;
height:300px;
background:#ff9933;
position:relative;
border:5px solid #33ff00;
}
.father{
width:300px;
height:300px;
background:#ff3366;
padding:20px;
border:5px solid #ffff00;
}
.son{
width:100px;
height:100px;
background:#0000ff;
padding:10px;
border:5px solid #ccffcc;
}
</style>
</head>
<body>
<div class="grandpa">
<div class="father" style="position:absolute;left:300px">
<div class="son" style="left:300px" ></div>
</div>
</div> <script type="text/javascript">
var father=document.querySelector(".father");
var grandpa=document.querySelector(".grandpa");
var son=document.querySelector(".son"); console.log(son.offsetWidth);//130
console.log(son.offsetHeight);//130
console.log(son.offsetLeft);//25
console.log(son.offsetTop);//25
console.log(son.offsetParent.className);//grandpa
console.log(son.parentNode);//<div class="father"></div>
console.log(son.style.left);//300px 这里虽然获得300px 但是由于没有设置position属性所以不起作用
console.log(father.style.left);//300px
son.offsetLeft="300";
console.log(son.offsetLeft);//20
son.style.left="500px";
console.log(son.style.left);
/*
offsetWidth 元素本身的宽度 content+padding+border 动态
offsetHeight 元素本身的高度 content+padding+border 动态
offsetLeft 此元素左外边框到有定位的长辈的边框距离 就近长辈
offsetTop 此元素右外边框到有定位的长辈的边框距离 就近长辈
js没有right 和 bottom
所以 right=son.offsetLeft+son.offsetWidth
top=son.offsetTop+son.offsetHeight 1. son.style.left 访问的话只能得到行内的style值 这样的div class="son" style="position:absolute;top:300px"></div> 2. 行内样式如果没有设置top值 style.top 得到的是空字符串 "" 3.offsetLeft 得到的是数字 30 而style.left得到的是字符串 30px 4.offsetLeft 是 onlyRead 就是只可以get 不能set style.left 可以set 也可以get 5.offsetLeft 可以返回没有设置定位属性盒子的left
而style.left 不行 没有设置定位属性的盒子没有left top属性
虽然可以获得行内设置的left style.left 300px
<div class="box" style="left:300px"></div>
但是没有作用 因为没有设置position 5. 如果想访问css style 还可以用以下方法
标准浏览器window.getComputedStyle(son)["left"];
IE son.currentStyle("left"); offsetParent 得到最近的有定位的长辈
比较记忆
parentNode 得到父节点 */
</script>
</body>
</html>
offset大家族(一)的更多相关文章
- JavaScript 特效之四大家族(offset/scroll/client/event)
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- Kafka 如何读取offset topic内容 (__consumer_offsets)
众所周知,由于Zookeeper并不适合大批量的频繁写入操作,新版Kafka已推荐将consumer的位移信息保存在Kafka内部的topic中,即__consumer_offsets topic,并 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- kafka主题offset各种需求修改方法
简要:开发中,常常因为需要我们要认为修改消费者实例对kafka某个主题消费的偏移量.具体如何修改?为什么可行?其实很容易,有时候只要我们换一种方式思考,如果我自己实现kafka消费者,我该如何让我们的 ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
- margin()与offset()的区别
margin() 简写属性在一个声明中设置所有外边距属性. offset() 方法返回或设置匹配元素相对于文档的偏移(位置).
- Excel——使用OFFSET、MATCH、COUNTA实现二级菜单
如图所示,接下来提供两种办法实现: 1.将A.B.C.D定义为名称NAME. 2.设置一级菜单单元格数据有效性为NAME. 3.设置二级菜单格数据有效为: =OFFSET($A$1,MATCH($A6 ...
- Excel——OFFSET函数
1.首先看下offset函数的参数设置: 说明:height,width表面它的返回值可以是一个数组,而并非一个值.这样,它就可以用于数据有效性等. 2.使用offset实现转置: 3.offset函 ...
- JavaScript中的 offset, client,scroll
在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...
随机推荐
- 20 Organizing Go code 组织go代码
Organizing Go code 16 August 2012 Introduction Go code is organized differently to that of other lan ...
- JQuery中DOM事件合成用法
jQuery有两个合成事件——hover()方法和toggle()方法 类似前面讲过的ready()方法,hover()方法和toggle()方法都属于jQuery自定义的方法. hover()方法: ...
- docker使用Dockerfile构建ssh容器
一.使用Dockerfile构建centos 1.创建 Dockerfile mkdir centos # 创建一个目录存放之后的Dockerfile,目录名无所谓 cd centos # 进入目录 ...
- 网络协议之NAT穿透
NAT IPv4地址只有32位,最多只能提供大致42.9亿个唯一IP地址,当设备越来越多时,IP地址变得越来越稀缺,不能为每个设备都分配一个IP地址.于是,作为NAT规范就出现了.NAT(Networ ...
- 最邻近规则分类KNN算法
例子: 求未知电影属于什么类型: 算法介绍: 步骤: 为了判断未知实例的类别,以所有已知类别的实例作为参照 选择参数K 计算未知实例与所有已知实例的距离 选择最近K个已 ...
- C#socket编程序(二)
在上一篇中,我列了一些常用的方法,可以说这些方法是一些辅助性的方法,对于分析网络中的主机属性非常有用.在这篇中,我将会介绍一下面向连接(TCP)socket编程,其中辅以实例,代码可供下载. 对于TC ...
- mycat 配置文件详解
server.xml 包含mycat的系统配置信息,它有两个标签,分别是user和system,掌握system标签的各项配置属性是mycat调优的关键. <?xml version=" ...
- Decorator 装饰
意图 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 结构 Component:定义一个对象接口,可以给这些对象动态地添加职责:(纯虚函数) Conc ...
- ionic启动App时不使用淡入淡出效果
找到我们项目下面 res下面的config.xml,然后加入下面两句就可以解决. <preference name="FadeSplashScreen" value=&quo ...
- forkcms 开启调试模式
You can enable debug mode by adding "SetEnv FORK_DEBUG 1" in your virtualhosts file.