节点操作2

let div = document.querySelector('div');

通过style在行内样式上获取样式 使用style获取样式 写的什么 就能获取到什么 不会转成rgb 和 出现其他的样式

    console.log('style',div.style.color )
    console.log('style',div.style.background )
    

style是获取不到在内部样式上或者外部样式上的样式的

     console.log( div.style.color )
      font-size js中要是用驼峰的方式获取 
     console.log( div.style.fontSize )

使用window.getComputedStyle可以获取行内、内部、外部的所有样式 但是 获得color是rbg格式的，获取的background是所有属性

    console.log( window.getComputedStyle(div,null).color )
    console.log( window.getComputedStyle(div,null).fontSize )
    console.log( window.getComputedStyle(div,null).background )
    console.log( window.getComputedStyle(div,null).height )

   

onclick 相当于给对象添加了一个属性 属性值 是一个函数 一点击就会触发

   div.onclick = function (){
         alert('你好')
  

onmouseover 鼠标移到某元素之上

     div.onmouseover = function(){
           '#ccc'十六进制的颜色值 
         div.style.background = '#ccc'

onmouseout 鼠标从某元素移开

     div.onmouseout = function(){
         div.style.background = 'none'
     }

onmousedown 鼠标按钮被按下

     div.onmousedown = function (){
         alert('鼠标被按下，还没有松开的时候触发')
     }
    

onmousedown 鼠标按钮抬起的时候触发

     div.onmouseup = function (){
         alert('鼠标抬起的时候触发')
     }
    

let div = document.querySelector('div')

添加className 一个或者多个

    div.className = 'bg c'
    div.onclick = function(){
    

移除className

        div.className = ''