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

html-css019

建站知识:如何使用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。 body{

background-color:#FFFFFFCURSOR: url('http://webme.bokee.com/inc/mouse127.ani') }

a{CURSOR: url('http://webme.bokee.com/inc/mouse094.cur')

鼠标地址自己根据需要进行改动。

2。

#phx{FILTER: Alpha(Opacity=100, FinishOpacity=10, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0) interWIDTH: 220pxHEIGHT: 32px}

代码放在css的任意空白处都行,代码中的width是调整宽度的,height是调整高度的,自己根据需要调

3。filter:glow (color=#ff0000,strength=3)

把上面的代码加到需要做闪字的地方,颜色和闪光的快慢自己设置。例如:需要标题有闪光

#header div.tit{FILTER: glow(color=#E8FFE8,strength=4)----}

4。空间名称和简介区域

#header 主体部分{height:89pxbackground:url(图片地址) repeat-x}

}------整个标题背景图片,这里加了下面两项就别加了

#header div.lc 左背景图{background:url(图片地址) no-repeat}

#header div.rc 右背景图{background:url(图片地址) no-repeat top right}

5。两种:

(1)整个空间只需要一张图片(需要大图片),则在这里设置

body

{background-color:#FFFFFFbackground-image:url(图片地址) no-repeat }

然而#header{height:240pxbackground:url() repeat-x}

#header div.lc{background:url() no-repeat}

#header div.rc{background:url() no-repeat top right}

.stage{background:#DFFFB2background:url(图片地址)}

则别再加图片

(2)标题和下面内容区域用不同的图片

#header{height:240pxbackground:url(图片地址) repeat-x}

#header div.lc{background:url() no-repeat}

#header div.rc{background:url() no-repeat top right}

.stage{background:#DFFFB2background:url(图片地址)}

在这两项中加入图片,而

body

{background-color:#FFFFFFbackground-image:url(图片地址)

则别再加图片