JS小项目实践：换肤与交互操作-优快云博客

这篇博客汇总了七个JavaScript小项目，包括换肤功能、按钮控制文本显示、元素显示隐藏、按钮导航改变元素属性、全选框功能以及选项卡切换。这些项目旨在提升JavaScript基础操作和交互设计能力。

JS小项目合集1

来源：B站JS从入门到精通视频

1.换肤

题目描述：

通过按钮实现页面css文件的切换，达到换肤效果。
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <link id="link1" rel="stylesheet"  href="css/css1.css"/>
  <title></title>
  <script>
   function skin1(){
   
   
    var link=document.getElementById("link1");
    link.href="css/css1.css";
   }
   function skin2(){
   
   
    var link=document.getElementById("link1");
    link.href="css/css2.css"
   }
  </script>
 </head>
 <body>
  <input type="button" id="div1" value="按钮1" onclick="skin1()">
  <input type="button" id="div1" value="按钮2" onclick="skin2()">
 </body>
</html>

2.点击按钮显示文本

题目描述

点击按钮使得文本框中出现文字。
在这里插入图片描述

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   function changeText(){
   
   
    var txt=document.getElementById("txt1");
    txt.value="Hello!";
   }
  </script>
 </head>
 <body>
  <input type="text" id="txt1"  />
  <input type="button" value="显示文本" onclick="changeText()" />
 </body>
</html>

3.按钮控制元素的显示

题目描述

点击按钮出现元素，再次点击元素消失。
在这里插入图片描述

题目代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <styl