[Javascript]cssText基本使用指北

tulayang 发布于2019-08-28 17:59 / 1469人阅读

摘要：如果解析失败则终止运行。如果新对象的并不匹配当前对象的则抛出异常。替换当前对象为新对象。是替换，也就是说会覆盖到目标元素之前本身所具有的全部样式继承的不算。除此以外，下返回的属性和值全是大写，为了避免日后出现意外，还是比较好。

一、cssText之起步

那些年，我们是这样设置样式的：

xxx.style.width = "233px";
xxx.style.position = "fixed";
xxx.style.left = "233px";

现如今，我们可以这样搞：

xxx.style.cssText="width:233px;height:233px;position:fixed";

W3C是这样描述cssText：

cssText，DOMString类型
cssText特性必须返回序列化的CSS规则。
当设置cssText特性时运行这些步骤：
 1. 解析其值。
 2. 如果解析失败则终止运行。
 3. 如果新对象的type并不匹配当前对象的type则抛出"InvalidModificationError"异常。
 4. 替换当前对象为新对象。

我以为关键在于第四条：

替换当前对象为新对象。

是替换，也就是说会覆盖到目标元素之前本身所具有的全部样式（继承的不算）。

举个栗子：

这里有一个

，长下面这个模样：

.xxx {height:233px;width:233px;background:#F60;}

然后我要改变它的高度，我可以这么写：

xxx.style.height= "466px";

但是客官你不可以这么写：

xxx.style.cssText="height:466px;";

二、cssText之提速

基于上面的原因，我们在使用cssText修改某个元素样式的时候，需要首先得到它当前的样式：

var xxx = document.getElementById("warp");
var xxx_style = xxx.style.cssText;

然后在加上现在的样式：

xxx_style += "position:fixed;"
xxx.style.cssText = xxx_style;

但是，客官如果贵司有下面这种情况，还请留步。

面对这种丧心病狂、男默女泪的情况，我们需要额外注意一点：

当我们使用var xxx_style = xxx.style.cssText;得到样式的时候，最后是没有分号的。

也就是说，如果某个元素的样式是：height: 100px; width: 100px;overflow: hidden;

在IE6/7/8下我们会得到：HEIGHT: 100PX; WIDTH: 100PX; OVERFLOW: HIDDEN

最后的分号被丢掉了。

结果就是当我们再使用

xxx_style += "background:#F60;"
xxx.style.cssText = xxx_style;

来处理样式时，会出现：height: 100px; width: 100px; overflow: hiddenbackground:#F60;

当然你可以选择使用：xxx_style = "background:#F60;" + xxx_style的方式，最后没有分号也不会影响，但是世事难料，安全起见，还是额外判断一下，补上这个分号比较可靠。

除此以外，IE6/7/8下返回的属性和值全是大写，为了避免日后出现意外，还是.toLowerCase( )比较好。

三、cssText之靠边停车

大家一路上在前端的道路上驰骋下去吧，就不用靠边停车了！

马上就要回家给伟大的祖国母亲庆祝生日了，微博上出现了2种不同的声音：

作业本同学说：

某注明作家（反正我是不认识）说：

作为还在上班（班，小名SegmentFault）的人，我就不说什么了...

大家国庆节快乐！

GPU云服务器云服务器 JavaScript基本对象 javascript基本类型 javascript基本语法 javascript基本教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110941.html

[Javascript]cssText基本使用指北

摘要：如果解析失败则终止运行。如果新对象的并不匹配当前对象的则抛出异常。替换当前对象为新对象。是替换，也就是说会覆盖到目标元素之前本身所具有的全部样式继承的不算。除此以外，下返回的属性和值全是大写，为了避免日后出现意外，还是比较好。一、cssText之起步那些年，我们是这样设置样式的： xxx.style.width = 233px; xxx.style.position = fix...

MASAILA 2019-08-21 12:31 评论0 收藏0
Nginx配置指北之gzip

摘要：如有错误，欢迎指正。如果使用了进行反向代理，那么和后端的之间默认是用协议通信的。如果不是这样，最好设置为，因为这会造成额外的开销。一个比较好的处理方式是放在或级别单独处理。无论是前端还是后端，在部署项目时，时常免不了用到Nginx，小项目也时常做个反向代理啥的。今天就简单直接，聊一下其中的一个点——gzip。如有错误，欢迎指正。一般服务器端常用的是 Ubuntu、CentOS、Li...

yunhao 2019-07-25 14:00 评论0 收藏0
JavaScript 作用域不完全指北

摘要：一旦到达顶层全局作用域，可能找到，也可能没有找到，查找过程都必须停止。当引擎执行查询时，如果查询在所有嵌套的作用域中遍寻不到所需的变量，引擎就会抛出异常。代表作用域判别失败相关，而则代表作用域判别成功了，但是对结果的操作是非法或不合理的。什么是作用域对于几乎所有编程语言，最基本的功能之一就是能够存储变量的值，并且能在之后对这个值进行访问和修改。这样就会带来几个问题，这些变量存储在哪...

coordinate35 2019-08-23 18:02 评论0 收藏0
ES6指北【6】——详谈解构赋值【附赠练习题】

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】一、何谓解构赋值？ 1. 基本概念首先我们看一下MDN给的定义解构赋值语法是一个 Javasc...

sorra 2019-08-23 11:33 评论0 收藏0
React Native 基础练习指北（一）

摘要：围观本文需自备，，以及。使用打开，并点击，会看到模拟器以及此项目对应的内容，效果如下如果想要修改显示内容，请打开，里面是一堆模样的东西。接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改。原文链接：http://www.tinghaige.com/ 本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。围观本文需自备Mac OSX ，...

nidaye 2019-08-21 10:29 评论0 收藏0