巧用cssText[通俗易懂]

巧用cssText[通俗易懂]IE6/7/8下cssText值与IE9/Firefox/Safari/Chrome/Opera不同1,IE6/7/8下cssText下返回值结尾没有分号,且属性名四十大写TESTvardiv=document.getElementsByTagName(‘div’);alert(div[0].style.cssText);IE6/7/8下 IE9/F

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

IE6/7/8下cssText值与IE9/Firefox/Safari/Chrome/Opera不同

1,IE6/7/8下cssText下 返回值结尾没有分号,且属性名四十大写

<div style="color:red; position:relative;">TEST</div>
<script>
    var div = document.getElementsByTagName('div');
    alert(div[0].style.cssText);
</script>

IE6/7/8下 

巧用cssText[通俗易懂]

IE9/Firefox/Safari/Chrome/Opera  ,返回值后面是带有分号的

巧用cssText[通俗易懂]

2、复合属性全部展开

<div style="border:2px solid #f00;">TEST</div>
<script>
    var div = document.getElementsByTagName('div');
    alert(div[0].style.cssText);
</script>

巧用cssText[通俗易懂]
巧用cssText[通俗易懂]

cssText的用法

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

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

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

function setStyle(obj,css){
  for(var atr in css){
    obj.style[atr] = css[atr];
  }
}
var head= document.getElementById("head");
setStyle(head,{width:"200px",height:"70px",display:"block"})

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

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

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

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

<div style="color:red;">TEST</div>
想给该div在添加个css属性width
div.style.cssText = "width: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;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158853.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • python数组拼接字符串_Python练习题——数组拼接

    python数组拼接字符串_Python练习题——数组拼接##输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个。##示例1:#输入:[10,2]#输出:”102″##示例2:#输入:[3,30,34,5,9]#输出:”3033459″##1#classSolution:#defminNumber(self,nums):#nums_str=[str(i)…

  • 「从零单排canal 03」 canal源码分析大纲

    「从零单排canal 03」 canal源码分析大纲

    2020年11月19日
  • springBoot跨域注解@CrossOrigin

    springBoot跨域注解@CrossOriginSpringFramework4.2GA为CORS提供了第一类支持,使您比通常的基于过滤器的解决方案更容易和更强大地配置它。所以springMVC的版本要在4.2或以上版本才支持@CrossOrigin;springBoot跨域注解:@CrossOrigin在controller控制类上方加注解;spring注解@CrossOrigin不起作用的原因1、是s…

  • java–接口

    java–接口

  • c++迭代器的实现_iterator迭代器用法

    c++迭代器的实现_iterator迭代器用法要访问顺序容器和关联容器中的元素,需要通过“迭代器(iterator)”进行。迭代器是一个变量,相当于容器和操纵容器的算法之间的中介。迭代器可以指向容器中的某个元素,通过迭代器就可以读写它指向的元素。从这一点上看,迭代器和指针类似。迭代器按照定义方式分成以下四种。正向迭代器,定义方法如下:容器类名::iterator 迭代器名;常量正向迭代器,定义方法如下:容器类名::cons…

  • html怎么让无序列表横向排列_一个人把敌人的炮兵阵地

    html怎么让无序列表横向排列_一个人把敌人的炮兵阵地司令部的将军们打算在 N×M 的网格地图上部署他们的炮兵部队。一个 N×M 的地图由 N 行 M 列组成,地图的每一格可能是山地(用 H 表示),也可能是平原(用 P 表示),如下图。在每一格平原地形上最多可以布置一支炮兵部队(山地上不能够部署炮兵部队);一支炮兵部队在地图上的攻击范围如图中黑色区域所示:如果在地图中的灰色所标识的平原上部署一支炮兵部队,则图中的黑色的网格表示它能够攻击到的区域:沿横向左右各两格,沿纵向上下各两格。图上其它白色网格均攻击不到。从图上可见炮兵的攻击范围不受地形的影响

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号