JS修改外部css背景图片样式

html代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>javascript</title>
 6    <link rel="stylesheet"  type="text/css" href="index.css">
 7 </head>
 8 <body >
 9 
10 <div class="d1"></div>
11 <div class="d2">
12     <button onclick="next()">下一个</button>
13     <button onclick="prev()">上一个</button>
14 </div>
15 
16 <script>
17      var images = [
18          'url(img/1.jpg)',
19          'url(img/background.jpg)',
20          'url(img/Bar.jpg)'
21      ];
22      var num = 0;
23      function next() {
24          var c1 = document.styleSheets[0].rules.length;
25          var c2 = document.styleSheets[0].rules[c1-1];
26 
27          // var slider = document.getElementById("slider");
28          num++;
29          if(num >= images.length) {
30              num = 0;
31          }
32          c2.style.backgroundImage = images[num];
33      }
34      function prev() {
35          var c = document.styleSheets[0].rules[2];
36          num--;
37          if(num < 0) {
38              num = images.length-1;
39          }
40          c.style.backgroundImage = images[num];
41      }
42 </script>
43 </body>
44 </html>

css代码

 1 * {
 2     padding: 0;
 3     margin: 0;
 4 }
 5 
 6 .d2 {
 7     position: absolute;
 8     bottom: 0;
 9     left: 0;
10     width: 200px;
11     height: 200px;
12     background-color: yellow;
13 }
14 
15 .d1 {
16     position: absolute;
17     top: 0;
18     left: 0;
19     width: 100vw;
20     height: 100vh;
21     background-image: url('img/1.jpg');
22 }

说明：特别注意图片路径正确引用

JS修改外部css背景图片样式

猜你喜欢