我正在嘗試獲得有關某些按鈕功能的幫助。到目前為止，我已經有了它，因此單擊單擊按鈕時影像和背景顏色會發生變化。我試圖做到這一點，當你點擊它時，整個網站會切換到“深色模式”，顏色更深，文字更亮。我掙扎的地方是影像填充和標題。這是到目前為止的代碼。
<!doctype html>
<html>
<head> <style> .title {font-size: 50px; text-align: center; background-color: #C1C1C1; border-radius: 20px; font-family:arial; color: #00486B;}
.img {background: coral; width: 500px; padding: 30px; margin-left: auto; margin-right: auto; display: block;}
.body {padding: 25px; background-color: white; color: black; font-size: 25px;}
.dark-mode {background-color: black; color: white;}
.main {text-align: center; font-size; 50px; border-radius: 20px; font-family: arial; color: #00486B;}
</style> <script>
function myFunction(){
var element = document.body;
element.classList.toggle("dark-mode")}
function changeImage(){
var image = document.getElementById('myImage');
if (image.src.match("skeletons.jpg")) {image.src = "joseph.jpg";}
else {image.src= "skeletons.jpg";}} </script>
<title>Java</title>
</head> <body class="main">
<h1 class="title">Toggle Display</h1>
<img src="skeletons.jpg" class="img" id="myImage">
<br>
<button onclick="myFunction(); changeImage();" value="Change">CLICK</button>
</body>
</html> ```
uj5u.com熱心網友回復：
如果您希望在暗模式下為影像和標題設定不同的樣式，您可以這樣做：
.dark-mode .img {
}
.dark-mode .title {
}
JSFiddle：https ://jsfiddle.net/oLtvjwhe/1/
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/336579.html
標籤：javascript html css