js操作css样式

  div.style.width="100px"  (行间样式)

  相当于标签内我们添加一个style属性,设定了width值,这种写法会给标签大量的style属性,以实际项目不符,我们没有css和HTML分离;

  所以如果为了获取css样式

  获取计算机计算的所有属性

  window.getcomputedstyle()  (两个参数,第一个是当前操作的元素  第二个是null)并且这个方法是只读的

  可读和可写的区别:   可读  只读获取不能修改        可写   可以修改

  计算的:只要渲染出来了都是经过计算的

  window.getcomputedstyle (ie 6 7 8不支持这个用法)

   ie8以下的写法为 :          ie6(元素名).currentstyle

  兼容性:

  try{}catch(error){}      (try{}尝试的)            (catch铺获)      (error报错)

  不报错执行try里面的代码块   ,  报错执行catch里面的代码

  前提的条件:代码必须报错,不报错就不能使用;

  案例:

  var css;

  try{

    css=window.getComputedStyle()

    }

  catch(e){

    css=aa.currentStyle

    }

  console.log(css)

  总结js解决兼容性的方法:

  1.   ||

  var dd=document.documentElement.clientWidth||document.body.clientWidth

  2.  if() 条件语句;

  if(window.getComputedStyle  ==(另一种写法:window.getComputed.style in window)){

    css=window.getComputedStyle(aa,null)

  }

  else{

    css=aa.currentStyle

  }

  console.log(css)

  3.try{}catch(error){}

  前提条件:必须在报错的条件下和if条件语句比较性能上比较差,不在万不得已的情况下,不能使用

  案例:

    var css;

    try{

      css=window.getComputedStyle()

      }

    catch(e){

      css=aa.currentStyle

      }

    console.log(css)

  null和undefined的区别?

  null和undefined都表示没有值,

  null(天生存在的)这个东西存在但是没有给值;

  undefined (人为定义)这个东西压根不存在,而是人为定义的

  案例:  console.log(aa.parentNode.parentNode.parentNode) (通过这个案例就知道元素节点的树状图,最后返回的是null)

  元素节点的树状图;

  document>documentElement(html)>body>tagname

  offsetLeft和offsetTop所结合运动

  滚动轮播    

  setTimeout(延时调用)

  定时器的返回值,返回是当前页面的第几个定时器

原文地址:https://www.cnblogs.com/shangjun6/p/9954095.html