offsetLeft 与 left的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} #demo {
width: 100px;
height: 100px;
/*position: absolute;*/
background-color: pink;
} </style>
</head>
<body>
<div id="demo" style="left:100px"></div>
</body>
</html>
<script>
var demo = document.getElementById("demo");
console.log(demo.offsetLeft); //打印出来的是0
console.log(demo.style.left); //打印出来的是100px </script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
} #father {
width: 200px;
height: 200px;
margin: 100px;/*不是到margin左侧的距离*/
padding: 50px;
border: 10px solid blue;
position: absolute;
background-color: pink;
} #son {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="father">
<div id="son"></div>
</div>
</body>
</html>
<script>
var son = document.getElementById("son");
console.log(son.offsetLeft); //打印出来是 50px;
</script>
offsetLeft 与 left的区别的更多相关文章
- offsetLeft,Left,clientLeft的区别
offsetLeft,Left,clientLeft的区别 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的 ...
- offsetLeft与style.left区别
在javascript中经常遇到style.left和offsetLeft,那么它们有什么区别呢?今天我们来分析下 offsetLeft:获取当前元素相对于父元素的左侧偏移量,比如该元素设置为rela ...
- JS中offsetLeft,Left,clientLeft的区别（纯转贴）
假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素. obj.offsetLeft ...
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- javascript中无法通过div.style.left获取值的问题
一.问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取. 让元素移动到200停止 setTim ...
- JavaScript操作DOM的那些坑
js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...
- JavaScript动画：offset家族和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset家族简介 我们知道,三大家族包括:offset/scroll ...
- JavaScript 特效之四大家族（offset/scroll/client/event）
三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制) 三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...
- JavaScript动画：offset和匀速动画详解(含轮播图的实现)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. offset简介 我们知道,三大家族包括:offset/scroll/c ...
随机推荐
- [转载]php 数组 类对象 值传递 引用传递 区别
一般的数据类型(int, float, bool)不做这方面的解说了 这里详细介绍一下数组和的类的对象作为参数进行值传递的区别 数组值传递 实例代码: <?php function main() ...
- GitHub 上值得关注的 iOS 开源项目
GitHub 上值得关注的 iOS 开源项目 原文链接:http://www.jianshu.com/p/e5dfe1a09611 GitHub 上值得关注的 iOS 开源项目 —— 由 红旗下的蛋 ...
- Release Candidate
RC_百度百科 https://baike.baidu.com/item/RC/7311964?fr=aladdin RC=Release Candidate,含义是"发布候选版" ...
- Android开发环境搭建时遇到问题的解决方法
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/linux_loajie/article/details/33823637 Android开发环境搭建 ...
- mysql 数据库导入错误：40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RES ...
- sql语句，无法绑定由多个部分组成的标识符 "xxx"
String sql = "select TOP 7 news_id,news_title,news_addtime,news_url from web_news_info a" ...
- mysql 数据库连接
1.需要mysql驱动包:mysql-connector-java-5.1.7-bin.jar 2. package com.jmu.ccjoin.web.controller; import jav ...
- 第一次往github上传文件步骤
第一次往github上传文件步骤: 1> 从右上角 '+' 位置下拉菜单中,创建一个repository 2>从右上角头像位置下拉菜单 setting中设置 SSH keys 3>打 ...
- [Java] public, private, protected
同包不同类的成员 不同包中子类的成员 不同包非子类的成员 public √ √ √ protected √ √ × 默认 √ × × private × × ×
- ImportError: No module named 'httplib'
原因:Python 2.x中的"httplib"模块在Python 3.x中变成了"http.client" 原代码: import httplib impor ...