2024-08-19 13:36:00 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Bytting av bakgrunnsfarge på nettleser</title>
|
|
|
|
|
<style>
|
|
|
|
|
div.bg {
|
|
|
|
|
width: 100px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
border: solid black 1px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.page {
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.green-bg {
|
|
|
|
|
background: green;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.red-bg {
|
|
|
|
|
background: red;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.blue-bg {
|
|
|
|
|
background: blue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.white-text {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="page">
|
2024-08-19 14:41:28 +02:00
|
|
|
<h2 id="title">Class</h2>
|
|
|
|
|
<p>Klikk på farge for å velge, klikk på boks eller knapp for å sette fargen</p>
|
2024-08-19 13:36:00 +02:00
|
|
|
<div id="farge1" class="green-bg" onclick="getColor1()">farge1</div>
|
|
|
|
|
<div id="farge2" class="blue-bg" onclick="getColor2()">farge2</div>
|
|
|
|
|
<div id="farge3" class="red-bg" onclick="getcolor3()">farge3</div>
|
|
|
|
|
|
|
|
|
|
<button onclick="changeBgColor()">Forandre hele bakgrunnen</button>
|
|
|
|
|
|
|
|
|
|
<div id="box-1" class="bg" onclick="setColor1()"></div>
|
|
|
|
|
<div id="box-2" class="bg" onclick="setColor2()"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
//let bgColor = document.getElementsByClassName();
|
|
|
|
|
var farge;
|
|
|
|
|
|
|
|
|
|
console.log(farge1, farge2, farge3);
|
|
|
|
|
function getColor1() {
|
|
|
|
|
farge = document.getElementById('farge1').className;
|
2024-08-19 14:41:28 +02:00
|
|
|
console.log(farge);
|
2024-08-19 13:36:00 +02:00
|
|
|
}
|
|
|
|
|
function getColor2() {
|
|
|
|
|
farge = document.getElementById('farge2').className;
|
2024-08-19 14:41:28 +02:00
|
|
|
console.log(farge);
|
2024-08-19 13:36:00 +02:00
|
|
|
}
|
|
|
|
|
function getcolor3() {
|
|
|
|
|
farge = document.getElementById('farge3').className;
|
2024-08-19 14:41:28 +02:00
|
|
|
console.log(farge);
|
2024-08-19 13:36:00 +02:00
|
|
|
}
|
|
|
|
|
function setColor1() {
|
|
|
|
|
document.getElementById('box-1').classList.add(farge);
|
2024-08-19 14:41:28 +02:00
|
|
|
console.log(farge);
|
2024-08-19 13:36:00 +02:00
|
|
|
}
|
|
|
|
|
function setColor2() {
|
|
|
|
|
document.getElementById('box-2').classList.add(farge);
|
2024-08-19 14:41:28 +02:00
|
|
|
console.log(farge);
|
2024-08-19 13:36:00 +02:00
|
|
|
}
|
|
|
|
|
function changeBgColor() {
|
|
|
|
|
document.getElementById('page').classList.add(farge);
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
