offsetLeft 与 left的区别
2024-09-27 12:34:44
<!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>
最新文章
- java 获取本地电脑的分辨率代码
- windows server2008 r2 下启用 sqlserver 2008的远程连接
- Access数据库中Sum函数返回空值（Null）时如何设置为0
- Ubuntu升级内核
- int (*(*fp)(void *))[10]; 指向函数的指针类型
- HDU 5703 Desert （找规律）
- 想入门webpack，这篇就够了
- Swift - 使用导航条和导航条控制器来进行页面切换并传递数据
- FFmpeg命令行工具学习(一)：查看媒体文件头信息工具ffprobe
- Android艺术——Bitmap高效加载和缓存（1）
- 一丢丢学习之webpack4 + Vue单文件组件的应用
- Andrew NG 机器学习编程作业4 Octave
- libRTMP 整体说明
- Cocos Creator代码编辑环境配置
- js 小结
- ELK5.4安装Xpack
- 【Xamarin】Visual Studio 2013 Xamarin for iOS 环境搭建
- WPF进阶之接口（1）：IValueConverter，IMultiValueConverter
- Codeforces 1099 C. Postcard-字符串处理(Codeforces Round #530 (Div. 2))
- linux内核源码中两个重要的宏