首页 / 知识
style对象的cssText方法有哪些使用方法
2023-04-11 15:06:00
cssText本质是什么？
cssText的本质就是设置HTML元素的style属性值。
cssText怎么用？
domElement.style.cssText="color:red;font-size:13px;";
cssText返回值是什么？
在某些浏览器中（比如Chrome），你给他赋什么值，它就返回什么值。在IE中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：
document.getElementById("d1").style.cssText="color:red;font-size:13px;";2alert(document.getElementById("d1").style.cssText);
在IE中值为：FONT-SIZE:13px;COLOR:red
cssText的使用优势
一般情况下我们用js设置元素对象的样式会使用这样的形式：
varelement=document.getElementById(“id”);
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”solid1pxred”;
样式一多，代码就很多；而且通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销。
js中有一个cssText的方法：
domElement.style.cssText=”样式”;
domElement.style.cssText=”width:20px;height:20px;border:solid1pxred;”;
这样就可以尽量避免页面reflow，提高页面性能。
但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：
domElement.style.cssText+=‘;width:100px;height:100px;top:100px;left:100px;’
再进一步，如果前面有样式表文件写着div{text-decoration:underline;}，这个会被覆盖吗？不会！因为它不是直接作用于HTML元素的style属性。
具体案例分析:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>控制div属性</title>
<style>
#outer{width:500px;margin:0auto;padding:0;text-align:center;}
#div1{width:100px;height:100px;background:black;margin:10pxauto;display:block;}
</style>
<script>
varchangeStyle=function(elem,attr,value)
{
elem.style[attr]=value
};
window.onload=function()
{
varoBtn=document.getElementsByTagName("input");
varoDiv=document.getElementById("div1");
varoAtt=["width","height","background","display","display"];
varoVal=["200px","200px","red","none","block"];
for(vari=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>
<divid="outer">
<inputtype="button"value="变宽"/>
<inputtype="button"value="变高"/>
<inputtype="button"value="变色"/>
<inputtype="button"value="隐藏"/>
<inputtype="button"value="重置"/>
<divid="div1"></div>
</div>
</body>
</html>
本文转载自中文网 |
最新内容
相关内容
python有map方法吗
python有map方法吗，培训，位置，数据，函数，列表，序列，参数，元素，方法，使用方法，python中的map：map()会根据提供的函数对指定序列做映射。第一个
pythondef有什么作用
pythondef有什么作用，代码，培训，名字，函数，括号，内部，定义，功能，作用，参数，python使用def开始函数定义，紧接着是函数名，括号内部为函数的参数，内
pythonpython与c区别有哪些
pythonpython与c区别有哪些，数据，培训，数字，标准，地址，概念，类型，语言，对象，变量，python与C的区别如下：1、语言类型不同Python是一种动态类型
pythonc语言取余和python取余的区
pythonc语言取余和python取余的区别，培训，资料，语言，负数，区别，被除数，符号，除数，规定，余数，今天看书发现python与C的负数取余运算结果不同,
pythonPython里有死循环吗?
pythonPython里有死循环吗?，培训，对比，方法，道理，以上，代表，程序，更多，内容，何为死循环?在编程中，一个无法靠自身的控制终止的循环被称为死循
python为什么没有return返回值
python为什么没有return返回值，培训，函数，语句，参数，赋值，变量，语法，下面，实际，以上，python中，用def语句创建函数时，可以用return语句指定应该
python如何定义接受参数的函数
python如何定义接受参数的函数，信息，培训，位置，参数，函数，列子，效果，定义，更多，内容，python中的函数可以有参数，也可以无参数，参数可以分为默认
python能判断一个变量的类型吗
python能判断一个变量的类型吗，培训，类型，对象，变量，函数，实例，语法，以上，参数，结果，python中是可以判断对象的类型的，判断python中的对象类型
python爬虫和数据分析有哪些第三方
python爬虫和数据分析有哪些第三方库？，培训，爬虫，和数，以上，更多，内容，以上内容为大家介绍了爬虫和数据分析有哪些第三方库，希望对大家有所
python没有main函数吗
python没有main函数吗，入口，代码，培训，位置，方法，函数，文件，程序，都会，属性，相信很多初学python的人看代码的时候都会先找一下main()方法，从ma
python脚本和网页的区别是什么
python脚本和网页的区别是什么，网站，培训，设计，通用，标准，平台，网页，语言，脚本，标记，python是一种计算机程序设计语言，一种面向对象的动态类型python有字符型吗
python有字符型吗，培训，数据，字符串，字符，引号，中文，内容，也就是，源程序，比如说，python中有字符类型，也就是字符串。简单地理解，字符串就是“一