JS中~偏移量设定方式与案例分析

1、history对象方法

 

分析：实现从主页跳转过来以后就会自动生成一个p标签并改写内容，利用location对象修改herf方法值，实现不用标签跳转。

问题：对于添加创建的元素使用方法遗忘，appendChild()方法是在父级中新建一个子级元素，一开始我是用button直接加的发现新建的标签是直接成为了button的子元素呈现嵌套的关系。解决方法：给button嵌套一个父级，让新增标签都成为子级元素添加到button后面

2、offset偏移量方法

offset概述
offset是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等

获得元素距离带有定位父元素的位置
获得元素自身的大小(宽度高度)注意:返回的数值都不带单位
offset系列常用属性:

 对于element.offsetParent的使用需要添加定位才能生效而且如果不加定位就会获取body这个元素，在此区分一下son.parentNode属性，它也是获取父级元素的，但不需要定位它也会直接返回最近一级的父元素

获取盒子的一半：element.offsetWidth / 2；就可以动态得到盒子自身的一半

3、对于偏移量与普通样式的区分

offset：偏移量

1、offset可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的
2、offsetWidth包含padding+border +width
3、offsetWidth等属性是只读属性，只能获取不能慧值

所以，我们想要获取元素大小位置，用offset更合适

style：样式值

1、style只能得到行内样式表中的样式值

2、style.width获得的是带有单位的字符串
3、style.width获得不包含padding和border的值

4、style.width是可读写属性,上可以获取也可以赋值

所以,我们想要给元素更改值，则需要用style改变

通过测试利用style修改的值并没有修改，而是在行内式中添加了一个新的键值对，由于行内式的优先级高于链入式所以会覆盖样式，使新增的样式修改出来

4、鼠标箭头样式：

cursor:

crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。

 案例：可在页面中移动的注册机界面

分析：opacity属性可以修改出半透明的效果，根据事件源的不同获得事件对象中的pagex/y的Positino，最后得出的数值去修改定位中的position数值。