htmi5中js怎么改左偏移

2023-02-19 15:47:02JavaScript013

htmi5中js怎么改左偏移,第1张

前言：以前一直是看别人写的，然后学习点东西，现在也把自己的学习记录下来，给大家一个学习的机会，欢迎大家多多评论和推荐哈，共同进步。竟然还有六个人关注我了，哈哈开心。我会继续写下去的。。

null和undefined都代表没有，但是null是属性存在值不存在，undefined是连这个属性都不存在

//例如 document.parentNode//浏览器天生自带的一个属性：父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了，它没有父亲) document.parentnode//undefined (因为没有parentnode这个属性)

1、parentNode:父亲节点 HTML结构层级关系中的上一级元素

var outer = document.getElementById('outer') var inner = document.getElementById('inner') var center = document.getElementById('center') center.parentNode //inner

2、offsetParent：父级参照物在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）

一般来说一个页面中所有元素的父级参照物都是body

document.body.offsetParent // null

想要改变父级参照物需要通过position定位来进行改变（absolute relative fixed 都可以进行改变）

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0 padding:0 } #outer{ width:180px height:180px margin:50px auto border:10px solid #000 background:orange padding:50px } #inner{ width:80px height:80px padding:50px border:10px solid #000 background:green } #center{ width:50px height:50px border:10px solid #000 background:red } </style></head><body> <div id="outer"> <div id="inner"> <div id="center"></div> </div> </div> <script> var outer = document.getElementById('outer') var inner = document.getElementById('inner') var center = document.getElementById('center') outer.style.position = "relative"//这样inner和center的参照物都是outer center.offsetParent//outer inner.offsetParent//outer outer.offsetParent//body outer.style.position = "relative"// inner.style.position = "relative" center.offsetParent//inner inner.offsetParent//outer outer.offsetParent//body </script></body></html>

3、offsetTop/offsetLeft :当前元素（外边框）距离其父级参照物（内边框）的偏移距离

具体如下图所示：

下面是一个offset方法：等同于jQuery中的offset方法，实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移），不管当前元素的父级参照物是谁。获取的一个结果是一个对象{left:距离BODY的左偏移，top:距离BODY的上偏移}

在标准的IE8浏览器中，我们使用offsetLeft/offsetTop其实是把父级参照物的边框已经算在内了。所以我们不需要自己在单独加边框了

代码如下：

function offset(curEle){ var totalLeft = null,totalTop = null,par = curEle.offsetParent //首先加自己本身的左偏移和上偏移 totalLeft+=curEle.offsetLeft totalTop+=curEle.offsetTop //只要没有找到body，我们就把父级参照物的边框和偏移也进行累加 while(par){ if(navigator.userAgent.indexOf("MSIE 8.0")===-1){ //累加父级参照物的边框 totalLeft+=par.clientLeft totalTop+=par.clientTop } //累加父级参照物本身的偏移 totalLeft+=par.offsetLeft totalTop+=par.offsetTop par = par.offsetParent } return{ left:totalLeft, top:totalTop } } console.log(offset(center).left)

在了解位运算之前, 必须先了解一下什么是原码, 反码和补码, 以及二进制与十进制的转换.

原码

一个数在计算机中是以二进制的形式存在的, 其中第一位存放符号, 正数为0, 负数为1. 原码就是用第一位存放符号的二进制数值. 例如2的原码为00000010, -2的原码为10000010

反码

正数的反码是它本身, 负数的反码是在其原码的基础上, 符号位不变, 其余各位取反.

可见如果一个反码表示的是负数, 并不能直观的看出它的数值, 通常要将其转换成原码再计算

补码

正数的补码是它本身, 负数的补码是在其原码基础上, 符号位不变, 其余各位取反, 最后+1. (即负数的补码为在其反码的基础上+1)

可见对于负数, 补码的表示方式也是让人无法直观的看出其数值的, 通常也需要转换成原码再计算.

正整数十进制转二进制

正整数的十进制转二进制的方法为将一个十进制数除以2, 得到的商再除以2, 以此类推知道商为1或0时为止, 倒序取得除得的余数, 即为转换所得的二进制数.

负整数十进制转二进制