js常用方法

# 1.回到页面指定位置

# （1）scrollTo()

scrollTo() 方法可把内容滚动到指定的坐标。

语法:

scrollTo(xpos,ypos)

此 api 需要传递 DOM元素相对于window的 left 和 top 的距离。它还有一个 behavior 参数，将其设置为 smooth 后，将会出现滑动的动画效果。步骤如下：

计算目标元素距离顶部的距离
通过事件触发

const backTop2 = document.getElementById("backTop2")
const TOP = document.getElementById("top")
const y = TOP.offsetTop
const backTop3 = document.getElementById("backTop3")
backTop3.addEventListener("click", function (e) {
    window.scrollTo({ top: y, left: 0, behavior: 'smooth' })
})

1
2
3
4
5
6
7

# （2）scrollIntoView()

Element接口的scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

语法

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

1
2
3

该 api 相较于上一个，节点信息更加的明确，操作方法也更加的简洁，更利于后续的维护代码如下

    const backTop2 = document.getElementById("backTop2")
    const TOP = document.getElementById("top")
    backTop2.addEventListener("click", function (e) {
        TOP.scrollIntoView({ behavior: "smooth" })
    })

1
2
3
4
5

# 2.获取dom元素样式的三种方法

# （1）Style对象

style读取样式

语法：元素.style.样式名

还可以设置通过style属性设置的样式

语法：元素.style.样式=样式值

注意：如果Css的样式值含有-，这种名称在JS中是不合法的，比如background-color；

我们在使用是要把这样的名称修改为驼峰命名法去掉-，然后将-号后的字母大写

注意：通过style属性设置和读取的都是内联样式，无法读取样式表中的样式。

例：

box1.style.width

# （2）currentStyle对象

currentStyle是获取元素当前显示的样式

语法：元素.currentStyle.样式名

注意：只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式

未设置的属性值，currentStyle 会读取浏览器默认值

	alert(box1.currentStyle.width);
	alert(box1.currentStyle.backgroundColor);

1
2

# （3）getComputedStyle()方法

getComputedStyle() 这个方法来获取元素当前的样式这个方法是window的方法，可以直接使用

需要两个参数第一个：要获取样式的元素第二个：可以传递一个伪元素，一般都传null

该方法会返回一个数组对象，对象中封装了当前元素对应的样式可以通过对象，样式名来读取样式如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如：没有设置width,它不会获取到auto 而是一个长度

但是该方法不支持IE9以下的浏览器

alert(getComputedStyle(box1,null).width)

# (4)解决兼容性问题

以上的三种方法都存在缺陷，style它只能获取到内联样式中的属性值，currentStyle它由于兼容性不好，使用起来有很大的问题。getComputedStyle()方法，也不能完美兼容，只支持IE9+以上的浏览器。

自定义一个函数，判断使用那种方法：

  /*
      obj 要获取样式的元素
      name 要获取的样式名
      */
function getStyle(obj,name){
  if(window.getComputedStyle){
 	 //正常浏览器的方式，具有getComputedStyle（）方法
 	 return getComputedStyle(obj,null)[name];
   }else{
	//IE8的方式，没有getComputedStyle（）方法
	return obj.currentstyle[name];
   }
//与上面的if作用一样 
//return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentstyle[name];
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 4.获取dom元素到页面顶部的距离

**Element.getBoundingClientRect()**方法返回元素的大小及其相对于视口的位置。

tBoundingClientRect().left); // 元素左边距离页面左边的距离

alert(box.getBoundingClientRect().top);     // 元素上边距离页面上边的距离

alert(box.getBoundingClientRect().right);    // 元素右边距离页面左边的距离

alert(box.getBoundingClientRect().bottom);    // 元素下边距离页面上边的距离

alert(box.getBoundingClientRect().left);        // 元素左边距离页面左边的距离