JavaScript Switcher theme nasıl yapılır?
- Konuyu başlatan 6icloud
- Başlangıç Tarihi
- Mesaj 3
- Görüntüleme 249
lazenes
Kilopat
- Katılım
- 27 Nisan 2017
- Mesajlar
- 70
- Çözümler
- 1
Daha fazla
- Cinsiyet
- Erkek
https://codepen.io/nadeeshae/pen/bGdLpVd Böyle bir Örnek var işine yarar mı?
KS
KS
6icloud
Hectopat
- Katılım
- 8 Ocak 2022
- Mesajlar
- 324
Daha fazla
- Cinsiyet
- Erkek
Kanka bunun renk gösterimli halini yapabilir misin top seklinde olacak şekilde.
Bu tarzda kanka
Bu tarzda kanka
Dosya Ekleri
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Changer</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="panel">
<button id="kBtn">Kırmızı</button>
<button id="yBtn">Yeşil</button>
<button id="mBtn">Mavi</button>
<button id="sBtn">Sarı</button>
</div>
<script src="main.js"></script>
</body>
</html>
CSS:
*
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel
{
display: flex;
justify-content: center;
column-gap: 100px;
}
.panel #kBtn
{
background-color: red;
border: 0px;
border-radius: 30px;
color: white;
width: 100px;
height: 50px;
margin-top: 30px;
}
.panel #yBtn
{
background-color: green;
border: 0px;
border-radius: 30px;
color: white;
width: 100px;
height: 50px;
margin-top: 30px;
}
.panel #mBtn
{
background-color: blue;
border: 0px;
border-radius: 30px;
color: white;
width: 100px;
height: 50px;
margin-top: 30px;
}
.panel #sBtn
{
background-color: yellow;
border: 0px;
border-radius: 30px;
color: white;
width: 100px;
height: 50px;
margin-top: 30px;
}
JavaScript:
const kBtn = document.getElementById('kBtn')
const yBtn = document.getElementById('yBtn')
const mBtn = document.getElementById('mBtn')
const sBtn = document.getElementById('sBtn')
kBtn.addEventListener('click',() => {
document.body.style.backgroundColor = "red"
})
yBtn.addEventListener('click',() => {
document.body.style.backgroundColor = "green"
})
mBtn.addEventListener('click',() => {
document.body.style.backgroundColor = "blue"
})
sBtn.addEventListener('click',() => {
document.body.style.backgroundColor = "yellow"
})@6icloud oldu mu hocam?
Son düzenleyen: Moderatör:
