网站首页鲁大师,专门做运动鞋的网站,宁波做网站软件,大连建站系统模板cssText 本质是什么#xff1f; cssText 的本质就是设置 HTML 元素的 style 属性值。
cssText 怎么用#xff1f; domElement.style.cssText color:red; font-size:13px;; cssText 返回值是什么#xff1f; 在某些浏览器中#xff08;比如 Chrome#xff09…cssText 本质是什么 cssText 的本质就是设置 HTML 元素的 style 属性值。
cssText 怎么用 domElement.style.cssText color:red; font-size:13px;; cssText 返回值是什么 在某些浏览器中比如 Chrome你给他赋什么值它就返回什么值。在 IE 中则比较痛苦它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号比如 1 document.getElementById(d1).style.cssText color:red; font-size:13px;;
2 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的方法 domElement.style.cssText”样式”;domElement.style.cssText”width:20px;height:20px;border:solid 1px red;”; 这样就可以尽量避免页面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 属性。 具体案例分析: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
meta http-equivContent-Type contenttext/html; charsetutf-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 idouter
input typebutton value变宽 /
input typebutton value变高 /
input typebutton value变色 /
input typebutton value隐藏 /
input typebutton value重置 /
div iddiv1/div
/div
/body
/html 本文是在学习了https://www.cnblogs.com/majingyi/p/6840818.html的基础上修改转载的。
