通过样式改变页面风格

最新推荐文章于 2023-03-24 16:45:44 发布

IT小旋风

最新推荐文章于 2023-03-24 16:45:44 发布

阅读量909

点赞数

分类专栏： HTML/JavaScript 文章标签： stylesheet div css border table html

本文链接：https://blog.csdn.net/cxw521816/article/details/3897531

版权

HTML/JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、动态改变页面风格效果，改变上面的下拉框，看看页面背景及文字改变效果

首先做一个下拉框

代码:

二、实现思路

1、制作几个不同的CSS文件

mr.css 代码

red.css 代码

blue.css 代码

blue1.css 代码

block.css 代码

block1.css 代码

2、网页调用某个默认的CSS文件，本例默认文件：mr.css
3、制作下拉列表框，其值设为前面作好的CSS文件名称
4、利用Onchange（）事件动态调用CSS文件，达到页面风格改变的效果

三、源代码

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>改变页面风格</TITLE>
<LINK id="1" type="text/css" rel="stylesheet" href="style/mr.css" >
</HEAD>
<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<TABLE width="90%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD>选择界面风格：<SELECT onChange="document.styleSheets[0].href=this.options[this.selectedIndex].value+'.css'" >
<OPTION value="Style/mr" selected>默认风格</OPTION>
<OPTION value="Style/red">粉红风情</OPTION>
<OPTION value="Style/blue1">蓝色天空</OPTION>
<OPTION value="Style/block1">灰暗忧郁</OPTION>
<OPTION value="Style/green"> 绿色地带</OPTION>
<OPTION value="Style/blue"> 蓝色港湾</OPTION>
<OPTION value="Style/block"> 黑白相间</OPTION>
</SELECT></TD>
</TR>
</TABLE>
</BODY>
</HTML>

四、制作改变页面风格网页把源代码粘贴到记事本文件,保存为后缀名为html or htm文件即可。

IT小旋风

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
通过样式改变页面风格

一、动态改变页面风格效果，改变上面的下拉框，看看页面背景及文字改变效果首先做一个下拉框代码: 默认风格粉红风情蓝色天空灰暗忧郁绿色地带蓝色港湾黑白相间二、实现思路 1、制作几个不同的CSS文件mr.css 代码body {background-color: #FFFFFF;}
复制链接

扫一扫