zoukankan      html  css  js  c++  java
  • 巧用cssText属性批量操作样式

    给一个HTML元素设置css属性,如

    1
    2
    3
    4
    var head= document.getElementById("head");
    head.style.width = "200px";
    head.style.height = "70px";
    head.style.display = "block";

    这样写太罗嗦了,为了简单些写个工具函数,如

    1
    2
    3
    4
    5
    6
    7
    function setStyle(obj,css){
      for(var atr in css){
        obj.style[atr] = css[atr];
      }
    }
    var head= document.getElementById("head");
    setStyle(head,{"200px",height:"70px",display:"block"})

    发现 Google API 中使用了cssText属性,后在各浏览器中测试都通过了。一行代码即可,实在很妙。如

    1
    2
    var head= document.getElementById("head");
    head.style.cssText="200px;height:70px;display:bolck";

    和innerHTML一样,cssText很快捷且所有浏览器都支持。此外当批量操作样式时,cssText只需一次reflow,提高了页面渲染性能。

    但cssText也有个缺点,会覆盖之前的样式。如

    <div style="color:red;">TEST</div>
    

    想给该div在添加个css属性width

    div.style.cssText = "200px;";
    

    这时虽然width应用上了,但之前的color被覆盖丢失了。因此使用cssText时应该采用叠加的方式以保留原有的样式。

    function setStyle(el, strCss){
    	var sty = el.style;
    	sty.cssText = sty.cssText + strCss;
    }
    

    使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题,但由于 IE6/7/8中cssText返回值少了分号 会让你失望。

    因此对IE6/7/8还需单独处理下,如果cssText返回值没";"则补上

    function setStyle(el, strCss){
    	function endsWith(str, suffix) {
    		var l = str.length - suffix.length;
    		return l >= 0 && str.indexOf(suffix, l) == l;
    	}
    	var sty = el.style,
    		cssText = sty.cssText;
    	if(!endsWith(cssText, ';')){
    		cssText += ';';
    	}
    	sty.cssText = cssText + strCss;
    }
    
  • 相关阅读:
    【js】js中的||和&&
    【jQuery】form表单元素序列化为json对象
    【jQuery】serializeArray()与serialize()的区别
    【jQuery】jquery-ui autocomplete智能提示
    【js】批量判断表单中的文本框非空
    【php】基础学习5
    【php】基础学习4
    【php】基础学习3
    SpringMVC与Struts2区别与比较总结
    iOS 改变UILabel部分颜色
  • 原文地址:https://www.cnblogs.com/yuyu9988/p/3368050.html
Copyright © 2011-2022 走看看