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>
转载于猿2048:➜《offset你们族(一)》javascript
相关文章
- 1. javascript的offset家族
- 2. DOM操做 三你们族
- 3. 了解spring你们族
- 4. 27 js三你们族
- 5. java集合你们族
- 6. offset、scroll、client三大家族
- 7. 原生JS中的三你们族（offset/scroll/client）与jQuery中对应的方法
- 8. 第52天：offset家族、scroll家族和client家族的区别
- 9. Map你们族的那点事儿
- 10. 机器人四你们族是如何炼成的？
- 更多相关文章...
- • 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
- • 一对一关联查询 - MyBatis教程
- • 再有人问你分布式事务，把这篇扔给他
- • RxJava操作符（一）Creating Observables
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
