Question

我正在尝试在明暗模式之间切换html页面，但是我仅设法更改第一层而不是.sheet a4层的颜色。有人可以解释一下该怎么做吗？

<!--  paper A4 css  -->

@page { margin: 0 }
body { margin: 0 }
.sheet {
  margin: 0;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  page-break-after: always;
}

body.A4
.sheet { width: 210mm; height: 296mm }
.sheet.padding-5mm { padding: 5mm }

@media screen {

  body {
    background: #e0e0e0
  }

  .dark-mode {
    background-color: #242526;
    color: blue;
  }

  .sheet {
    background: white;
    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
    margin: 5mm auto;
  }
}

</style>
</head>

    @page { size: A4 }

    <body class="A4">
    <section class="sheet padding-5mm">

这是可切换颜色的javascript函数：

document.getElementById('dark-test').onblur= function () {
   var element = document.body;
   element.classList.toggle("dark-mode");
}

HTML黑暗模式在2层上切换

0 个答案: