Changer BackgroungColor a l'aide d'un objet
Bonjours a vous :) je fais fasse a un probleme que je ne comprends pas...
j'ai créé un objet dans mon fichier panel.js celui-ci comprend un constructeur en paramètre la valeur color et j'ai un setteur pour attribuer une valeur de mon choix via la console(ici il est question de rentré une couleur).
donc dans la console quand je rentre ceci pan.bckcolor = "red" et bien celui-ci a une valeur de red puis je peux changer la valeur comme je veux via la console sans aucun probleme mais dans mon fichier main.js les deux dernière ligne j'ai fais des test pour changer le backgroundColor et quand je tape ceci
Code:
document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;
l'objet pan.bckcolor a aucune valeur mais pourquoi? c'est ce que je ne comprend pas parce que via la console quand je lui attribue une valeur a bckcolor elle est bien pressente...
panel.html
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Panel escamotable</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
#hote_panel {
background-color: blue;
}
</style>
<body>
<div id="hote_panel" class=" w3-sidebar w3-bar-block w3-animate-left" style="display:none">
<button class="w3-bar-item w3-button w3-large" onclick="close()">Close ×</button></div>
<main>
<button class="w3-button w3-white w3-xxlarge">☰</button>
<h1>Panel escamotable</h1>
<p>Panel utilisé et adapté: <a
href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_animate">W3.CSS Animated
Sidebar</a></p>
</main>
<script src="script/panel.js"></script>
<script src="script/main.js"></script>
</body>
style="background-color:red;"
</html> |
Main.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
/**
* Panel escamotable
* Fichier script/main.js
* lié à la gestion de la page
*/
"use strict";
console.log('script/main.js loaded');
let pan = new Panel(document.getElementById('hote_panel'));
document.querySelector('main > button').addEventListener('click', () => { pan.open() });
document.getElementById("hote_panel").addEventListener('click', () => { pan.close() });
console.log(pan)
function open() {
document.getElementById("hote_panel").style.display = "block";
}
function close() {
document.getElementById("hote_panel").style.display = "none";
}
document.getElementById('hote_panel').style.backgroundColor = pan.bckcolor;
// pan.bckcolor.innerHTML = document.getElementById('hote_panel').style.backgroundColor; |
panel.js
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
/**
* Objet Panel escamotable
* Fichier script/panel.js
* lié à la gestion de la page
*/
"use strict";
console.log('script/panel.js loaded');
class Panel {
constructor(color) {
this.bckcolor = color;
}
// //methode ouvrir sidebar
open() {
return document.getElementById("hote_panel").style.display = "block";
}
// //methode fermer sidebar
close() {
return document.getElementById("hote_panel").style.display = "none";
}
// Accesseur get ("getter")
get color() {
return this.bckcolor;
}
// Accesseur set ("setter")
set color(c) {
this.bckcolor = c;
}
} |
