js操作CSS样式简单案例

最新推荐文章于 2024-08-02 18:32:53 发布

冯晓如

最新推荐文章于 2024-08-02 18:32:53 发布

阅读量390

点赞数

分类专栏： Web前端文章标签： js操作css简单案例

本文链接：https://blog.youkuaiyun.com/honeygirl_/article/details/103002601

版权

本文提供两个简单的JS操作CSS样式的案例。案例1介绍如何使用JS实现网页换肤功能，通过改变style或css实现样式变化。案例2详细讲解了设计折叠面板的过程，利用CSS的display属性和JS进行动态控制，实现面板的展开与折叠效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js操作CSS样式简单案例

案例1.设计网页换肤
js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

 <head>
 
  <title>网页换肤</title>
  
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
 <script language="javascript">
 
   function test4(event) {
      if(event.value == "黑色") {
       //获取div1
       var div1 = document.getElementById('div1');
       div1.style.backgroundColor="black";
      }
      if(event.value == "红色") {
       //获取div1
       var div1 = document.getElementById('div1');
       div1.style.backgroundColor="red";
      }
     }
 </script>
 
</head>

<body>
 <div id="div1"

最低0.47元/天解锁文章