你的位置:首页 > 软件开发 > Java > 拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

发布时间:2016-11-14 00:01:12
在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标签的内容  一个标签的样式有可能是多个样式文件所定义而成了,所以浏览器在解释标签 ...

  在用dom操作在对页面中的<style></style>里的样式进行操作时,发现时无效的,我觉得是因为页面DOM解析时此标签的样式内容才会被读到内存中,因此JS操作时取不到此标签的内容

  一个标签的样式有可能是多个样式文件所定义而成了,所以浏览器在解释标签的时候会有一个计算标签最后样式的过程,想要对<style>中定义格式的标签的样式进行修改必须去操作最后浏览器计算机计算出的样式,这里用obj下的currentStyle方法,具体测试如下:

<html><style type="text/css">  div{    width: 300px;    height: 300px;    border-bottom: 1px solid black;  }  .test1{    background: red;  }  .test2{    background: green;  }</style><script type="text/javascript" >  function getStyle(obj,attr){    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];    //return getComputedStyle(obj,null)[attr];  }  function t(){    var m = document.getElementsByTagName('div')[0];        console.log(m);    console.log(m.className);    if (!m.className.indexOf('test1')) {      m.className = 'test2';      //alert(m.style.width);    }else{      m.className = 'test1';          }      //alert(getStyle(m,'width'));      //return;      getStyle(m,'width') = parseInt(getStyle(m,'width')) + 5;      m.style.height = parseInt(getStyle(m,'height')) + 5;      m.style.borderBottom = parseInt(getStyle(m,'borderBottom')) + 1;  }</script><div class="test1" onclick="t();" >  这是一个特效</div></html>

原标题:拿到内存中dom元素的最后样式进行修改obj下的currentStyle方法

关键词:内存

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。