cssText 本质是什么？

cssText 的本质就是设置 HTML 元素的 style 属性值。

cssText 怎么用？

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

cssText 返回值是什么？

在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：

 
document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

alert(document.getElementById("d1").style.cssText);

在 IE 中值为：FONT-SIZE: 13px; COLOR: red

cssText的使用优势

一般情况下我们用js设置元素对象的样式会使用这样的形式：

var element= document.getElementById(“id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid 1px red”;

样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。

js中有一个cssText的方法：

语法为：

obj.style.cssText=”样式”;

element.style.cssText=”width:20px;height:20px;border:solid 1px red;”;

这样就可以尽量避免页面reflow，提高页面性能。

但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：

Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’

因此，上面cssText累加的方法在IE中是无效的。

最后，可以在前面添加一个分号来解决这个问题：

Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’

再进一步，如果前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？不会！因为它不是直接作用于 HTML 元素的 style 属性。

具体案例分析

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>控制div属性</title>

<style>

#outer{width:500px;margin:0 auto;padding:0;text-align:center;}

#div1{width:100px;height:100px;background:black;margin:10px auto;display:block;}

</style>

<script>

var changeStyle = function (elem, attr, value)

{

	elem.style[attr] = value

};

window.onload = function ()

{

	var oBtn = document.getElementsByTagName("input");

	var oDiv = document.getElementById("div1");

	var oAtt = ["width","height","background","display","display"];

	var oVal = ["200px","200px","red","none","block"];

	for (var i = 0; i < oBtn.length; i++)

	{

		oBtn[i].index = i;

		oBtn[i].onclick = function ()

		{

			this.index == oBtn.length - 1 && (oDiv.style.cssText = "");

			changeStyle(oDiv, oAtt[this.index], oVal[this.index])

		}

	}

};

</script>

</head>

<body>

<div id="outer">

<input type="button" value="变宽" />

<input type="button" value="变高" />

<input type="button" value="变色" />

<input type="button" value="隐藏" />

<input type="button" value="重置" />

<div id="div1"></div>

</div>　　

</body>

</html>

cssText的用法以及特点的更多相关文章

  1. JavaScript小练习1-控制div属性

    题目 要实现的效果如图所示:查看演示 *** 分析 乍一看还以为十分简单,就是简单的点击button时触发的函数来改变样式值,不过做到后面就开始打脸了--"重置"功能.其实要实现重 ...

  2. JavaScript 学习笔记——cssText

    平常编写代码,更改一个元素样式的时候,自己都是用 obj.style.width = "200px"; obj.style.position = "absolute&qu ...

  3. cssText

    cssText 的本质就是设置 HTML 元素的 style 属性值 cssText 的方便之处在于一次可以写很多属性,而且变更 CSS 样式不必变 JS 代码,只需变样式字符串.但它有个缺点,就是它 ...

  4. CSS语法与用法小字典

    前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...

  5. javaScript中with的用法

    1 JavaScript中的with语句的作用是为逐级的对象访问提供命名空间式的速写方式, 也就是在指定的代码区域, 直接通过节点名称调用对象 初次接触到with用法,是这样一段代码: 1 2 3 4 ...

  6. DOM Style样式对象的详细用法

    DOM Style样式对象的详细用法 HTML Style样式比较复杂,相应访问.修改方法也有所差异.参考相关资料,整理如下. 典型Html文件如下,有三种定义方式. <head>     ...

  7. document.body的一些用法以及js中的常见问题

    document.body的一些用法以及js中的常见问题 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight ...

  8. EditText 基本用法

    title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...

  9. jquery插件的用法之cookie 插件

    一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...

随机推荐

  1. CentOS 下安装 Node npm pm2

    1.node安装 参考:http://blog.csdn.net/haidaochen/article/details/7257655 下载,你需要在https://nodejs.org/en/dow ...

  2. Akamai在内容分发网络中的算法研究（翻译总结）

    作者 | 钱坤 钱坤,腾讯后台开发工程师,从事领域为流媒体CDN相关,参与腾讯TVideo平台开发维护. 原文是<Algorithmic Nuggets in Content Delivery& ...

  3. linux系统各种乱码问题

    linux系统乱码问题 最近使用ubuntu操作系统(客户端)在ssh连接linux服务器的时候发现乱码问题,但是本机查看中文显示中文没有问题,只是在使用终端more查看本地或远端gbk之类中文编码的 ...

  4. jPaginate 一个非常好用的分页插件

    之前报馆项目用的前端框架easyui,还是用不太习惯,因此换了一个框架,最近为此找分页插件,偶然间看见一个非常好用的分页插件JPaginate Paginate是基于jquery的分页插件,非常轻量, ...

  5. 翻译一篇文章：It's Difficult to Grow a Test Developer（成为测试开发工程师的艰辛）

    翻译一篇文章:It's Difficult to Grow a Test Developer(成为测试开发工程师的艰辛)   以下文章是送给来poptest学习测试开发工程师的学员们,很多人想测试工程 ...

  6. （转）POPTEST创始人李爱然：谢谢，帮助我的朋友！！！！

    2015年11月15日,脉脉上随意浏览信息.每天有很多人加我,我也会主动加一些人.脉脉的广告语“打通职场人脉”,很直白的告诉我们脉脉是用来找人办事的.简单明了,不用故作清高. “利”,有利可图便是“友 ...

  7. 1034. Head of a Gang

    One way that the police finds the head of a gang is to check people's phone calls. If there is a pho ...

  8. LINUX ON AZURE 安全建议（全）

    本文为个人原创,可以自由转载,转载请注明出处,多谢! 本文地址:http://www.cnblogs.com/taosha/p/6399554.html 1.网络与安全规划 Azure 虚拟网络 (V ...

  9. php数组--2017-04-16

    一.定义数组 (1)索引数组 $arr=array(1,2,3,3); (2)关联数组  类似于集合 $arr1=array("one"=>"111",& ...

  10. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...