建站知识:如何使用JS来自由切换css样式表

html-css051

建站知识:如何使用JS来自由切换css样式表,第1张

详细方法如下:第一步:在连接样式表的元素里定义一个id,例如<link href="1.css" rel="stylesheet" type="text/css" id="css">我定义的id是css。第二步:写一个js函数,代码如下:<script type="text/javascript">function change(a){var css=document.getElementById("css");if (a==1)css.setAttribute("href","1.css");if (a==2)css.setAttribute("href","2.css");}</script>这个函数的code可以放在页面的任何地方。第三步:为改变页面的样式表的连接添加一个函数的触发事件,代码如下:<a href="#" onClick="change(1)">1.css</a><a href="#" onClick="change(2)">2.css</a>该效果在IE和FF下均测试通过,相信大家看完后因该非常明了,利用这个方法我们可以让浏览者自己选择需要显示的样式表,好比年迈者可以选择一个字体较大的样式表。这里需要留意的两点是:另外假如是改变整个页面的样式,你需要在样式表文件里定义body的高度为100%

1.

使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1性质(属性)2: 设定值2...} 例如: <TD STYLE="COLOR:BLUEfont-size:9ptfont-family:"标楷体"line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。

2.

使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。 通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD></HEAD>部

Eclipse 计划刚出现的时候从事Eclipse各个项目的团队和开发者就Eclipse未来下一步该怎么走进行了激烈讨论 而随着Eclipse SDK中的CSS主题功能得到明显改善 Eclipse RCP技术越来越成熟 特别是我们进行动态主题转换时更为简单方便 这些讨论渐渐地平息了 本文载自一个外国专家Kai的blog 全文如下

如果你想要实现一个CSS主题转换 只需扩展你的Eclipse 路径如下 eclipse e ui css swt theme

这里有一个在Eclispe 下进行双模板声明的示例可以参考

<extension

point= eclipse e ui css swt theme >

<theme

    basestylesheeturi= css/dark gradient css

    id= ntacts themes darkgradient

    label= Dark Gradient Theme >

</<span>theme>

<theme

    basestylesheeturi= css/bright gradient css

    id= ntacts themes brightgradient

    label= Bright Gradient Theme >

</<span>theme>

</<span>extension>

然后需要做的就是指定一个程序来切换实际的主题 这里是选择dark gradient主题的全部代码

public class DarkThemeHandler {

   @Execute

   public void execute(IThemeEngine engine) {

      engine setTheme( ntacts themes darkgradient )

   }

}

使用工作台模型来将我们的转换程序绑定到目录或工具栏 下面的两幅效果图就展示了黑色主题和明朗主题之间的动态转换

黑色主题

明亮主题

lishixinzhi/Article/program/Java/hx/201311/26905