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. Memcached十问十答

    1.Memcached是什么,有什么作用? Memcached是一种纯内存的,key-value,CS架构的数据库服务软件,主要用于数据库,web服务器的缓存,以减小数据库,web服务器的访问压力,尤 ...

  2. Flask入门笔记(一)

    一.程序的基本结构 1.1 最简单的Flask程序 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #coding=utf-8 # 初始化 from flask import Fla ...

  3. centos 6.5 搭建JSP运行环境

    一.安装nginx yum install nginx #安装nginx,根据提示,输入Y安装即可成功安装 service nginx start #启动 chkconfig nginx on #设为 ...

  4. 手机自动化测试：appium源码分析之bootstrap五

    手机自动化测试:appium源码分析之bootstrap五   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.poptest测试 ...

  5. 08 Noise and Error

    噪声:误标.对同一数据点的标注不一致.数据点信息不准确... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f--->p(y|x),f是p的特殊情况:如 ...

  6. /etc/postfix下 main.cf 配置文件详解

    postconf -n   #别名数据库(postalias/newaliases 命令生成) alias_database = hash:/etc/postfix/aliases   #别名表,列出 ...

  7. JavaScript数组基础编程题归纳

    之前的随笔"JavaScript中数组类型的属性和方法"中有介绍很多数组类型的方法,但都是一些理论.最近在练习在线编程题,发现自己还是习惯于用常规的循环来答题,对于数组的方法的使用 ...

  8. python黑魔法之metaclass

    最近了解了一下python的metaclass,在学习的过程中,把自己对metaclass的理解写出来和大家分享. 首先, metaclass 中文叫元类,这个元类怎么来理解呢.我们知道,在Pytho ...

  9. ios sqlite3的简单使用

    第一:创建表格 //创建表格 -(void)creatTab{ NSString*creatSQL=@"CREATE TABLE IF NOT EXISTS PERSIONFO(ID INT ...

  10. jquery如何设置html众标签中的值

    $("img").attr("src",some_url);//jquery设置img标签中的src值 $("#user").val(&qu ...