Js实现动态更改Css样式之土豆网开/关灯效果!

简介:  1 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2  3  4     开关灯效果 5      6         body 7         { 8             background: #FFF; 9         }10         .

 

 1  <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
 2  < html >
 3  < head >
 4       < title > 开关灯效果 </ title >
 5       < style  type ="text/css" >
 6          body
 7           {
 8              background :  #FFF ;
 9           }
10          .day
11           {
12              background :  #000 ;
13           }
14          .night
15           {
16              background :  #FFF ;
17           }
18       </ style >
19       < script  language ="javascript"  type ="text/javascript" >
20           function  Switch() {
21               var  btnSwitch  =  document.getElementById( " btnSwitch " );
22               var  type  =  document.body.className;
23               if  (type  ==   " day " ) {
24                  document.body.className  =   " night " ;
25                  btnSwitch.value  =   " 关灯 " ;
26              }  else  {
27                  document.body.className  =   " day " ;
28                  btnSwitch.value  =   " 开灯 " ;
29              }
30          }
31       </ script >
32  </ head >
33  < body >
34       < input  id ="btnSwitch"  type ="button"  value ="关灯"  onclick ="Switch()"   />
35  </ body >
36  </ html >

 

目录
相关文章
|
8天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
9天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
26 6
|
14天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
86 1
|
22天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
33 2
|
1天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
1天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
17天前
|
移动开发 前端开发 JavaScript
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
11 0
|
23天前
|
前端开发 Ubuntu Linux
CSS 修改鼠标图标样式
CSS 修改鼠标图标样式
31 0