1.关于使用element.style…..修改样式注意项：
    当修改一个或几个可以使用，但是如果要修改的样式很多，我们可以通过修改类名的形式来修改样式
    image.png

    1. 如果我们要在JavaScript手动获取页面的样式，我们以前是通过element.style…..的方式来获取，但是获取的行内样式，如果行内样式没用定义，只是定义在外部，我们需要通过getcomputedStyles获取
    1. // 查看计算样式
    2. // 可以通过getcomputed获取元素的样式
    3. function getStyles(elem, prop) {
    4.   if (window.getComputedStyle) {
    5.     if (prop) {
    6.       return window.getComputedStyle(elem, null)[prop]
    7.     } else {
    8.       return window.getComputedStyle(elem, null)
    9.     }
    10.   } else {
    11.     if (prop) {
    12.       return elem.currentStyle[prop]
    13.     } else {
    14.       return elem.currentStyle
    15.     }
    16.   }
    17. }

    一个比较明显的案例，就是我们获取页面某个盒子的宽高时，我们通过offsetWidth或者offsetHeight来获取，但是这个是实际宽高 + border + padding ，如果我们需要获取我们自己定义的宽高，则

    // let res2 = window.getComputedStyle(box, 'before')['width']
// console.log(res2) // 50px

    对于window.getComputedStyle(elem, null)[prop]的null参数是为了操作伪元素使用的
    3.获取子元素
    image.png