如何在网页中动态改变样式

发布时间:2017-1-17 14:50:39 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"如何在网页中动态改变样式",主要涉及到如何在网页中动态改变样式方面的内容,对于如何在网页中动态改变样式感兴趣的同学可以参考一下。

方法: 把界面的多个样式存储到不同的样式文件中,然后通过client的操作(就是单击按钮)动态的加载新的样式文件,实现界面元素样式的批量修改。 原理: 每个style样式对象都有一个stylesheet属性,指向该style对象的样式对象。 stylesheet对象具有cssText属性,值为样式文本的具体设置内容,可读写,我们可以把这个属性的值设置为一个空的字符串删除样式。 stylesheet对象具有addImport方法,用于加载URL文件,其调用格式为:stylesheet.addImport(sURL[,iIndex]),sURL为要加载的CSS文件URL,iIndex为集合中样式单被请求的位置,缺省为样式单被添加至集合的末尾。 示例: 本示例通过点击按钮动态的切换页面背景颜色。 HTML代码: <html> <head>   <title></title>   <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">   <link href="stylesheet1.css" type="text/css" rel="stylesheet" id="mycss">   <script language="javascript">   var turnback=false;   function setCSS()   {    mycss.styleSheet.cssText="";    mycss.styleSheet.addImport(turnback?"stylesheet1.css":"stylesheet2.css");    turnback=!turnback;   }   </script> </head> <body>   <button onclick="setCSS()" type="button">切换背景颜色</button> </body> </html> StyleSheet1.CSS样式代码: BODY { background-color: Black; } StyleSheet2.CSS样式代码: BODY { background-color: maroon; } 里面说到stylesheet.addImport(sURL[,iIndex]),sURL为要加载的CSS文件URL,iIndex为集合中样式单被请求的位置,缺省为样式单被添加至集合的末尾。那如果要引入STYLE2的话就是mycss.styleSheet.addImport("stylesheet2.css"); 但是它mycss.styleSheet.addImport(turnback?"stylesheet1.css":"stylesheet2.css");为什么就能实现不停的切换呢?还有var turnback=false; 和   turnback=!turnback;具体有什么用呢? 这里的操作和样式表无关 纯粹是js的一个三目运算符 ?: 比如 a=a==b?1:0; 相当于 if(a==b)   a=1; else   a=0; 而在你的问题中 turnback 仅仅是个标志 来记录当前样式表的状态 var turnback=false;是令turnback为假 turnback=!turnback;是令turnback状态翻转(真变假 假变真)

上一篇:git实战
下一篇:windows socket----select模型

相关文章

相关评论