body代码

    <div class="box" style="background-color: red;"></div>
    

1.获取元素样式

语法:

    元素.style.某个属性

注意:

• 1. 我们也可以给这个语法重新赋值, 达到修改元素样式的效果 (修改的是行内的样式)
• 2. 这种语法获取到的元素样式, 只能获取到行内样式

1.0 获取元素

    var oDiv = document.querySelector('.box')

1.1 获取元素样式

    console.log(oDiv.style.width)
    console.log(oDiv.style.height)
    console.log(oDiv.style.background-color)    // 直接这样写相当于写了一个 oDiv.style.background - color, 这是一个错误写法
    console.log(oDiv.style['background-color']) // 中括号语法
    console.log(oDiv.style.backgroundColor) // 驼峰命名

1.2 设置元素样式

    oDiv.style.width = 666 + 'px'
    oDiv.style.backgroundColor = 'red'
    

1.3 获取非行内样式

语法:

    window.getComputedStyle(元素).要查询的css属性

注意: 这种方式获取到的属性 是只读的

只读: 能获取到, 但是不允许修改

    console.log(window.getComputedStyle(oDiv).width)
    console.log(window.getComputedStyle(oDiv).backgroundColor)
    window.getComputedStyle(oDiv).width = 800 + 'px' // 不允许修改, 会有报错
    

2.获取元素类名

body代码

    <div class="box new_box"></div>

2.1 className

专门用来操作元素的 类名

语法:

     元素.className
     

我们也可以给他重新赋值, 来达到修改元素的类名

   oDiv.className = 'new_box'
   console.log(oDiv.className)

2.2 classList

获取, 新增, 删除

0. 获取元素

    var oDiv = document.querySelector('.box')
    

1. 获取

     console.log(oDiv.classList)

2 新增

     oDiv.classList.add('qwer')

3 删除

    oDiv.classList.remove('new_box')