JS的DOM的获取元素样式和类名

获取元素样式

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

      // 0.获取元素
      var oDiv = document.querySelector('.box')
      console.log(oDiv)
      
      //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) //驼峰命名
      
      //2.设置元素样式
      oDiv.style.width = '666px'
      oDiv.style.backgroundColor = 'red'
  

• 2.获取非行内样式
  • 语法：window.getComputedStyle(元素).要查询的样式(css属性)
  • 可以获取行内样式获取非行内样式
  • 注意：这种方式获取到的属性 是只读的
  • 只读：能获取到，但是不能修改

      var oDiv = document.querySelector('.box')
      console.log(window.getComputedStyle(oDiv).width)
      console.log(window.getComputedStyle(oDiv).backgroundColor)
      // window.getComputedStyle(oDiv).width = '800px' 
      //不允许修改，会有报错
  

获取元素类名

1.className

 *   专门用了操作元素的类名
 *   语法：元素.className
 *   作用：我们也可以给他重新赋值，来达到修改元素的类名

!2.classList

 *   获取 console.log(oDiv.classList)
 *   新增 oDiv.classList.add('新增的类名')
 *   删除 oDiv.classList.remove('要删除的类名')

    // 0.获取元素类名
    var oDiv = document.querySelector('.box')
    //1.className
    console.log(oDiv.className) //box new_box
    oDiv.className = 'new_box'//重新赋值

    // 2.1获取
    console.log(oDiv.classList)

    // 2.2新增
    oDiv.classList.add('qwer')

    // 2.3删除
    oDiv.classList.remove('new_box')