Changer le style d'un élément de childNodes
Résolu
Totolego
-
Totolego -
Totolego -
Bonjour, J'ai problème dans mon code, quand j'appuie sur un bouton j'ajoute une photo et cette photo et les autres (qui était la avant) doivent changer de style. Pour cela j'utilise childNodes sauf qu'ils me disent que children n'est pas un objet.
voici une parti de mon code:
Merci.
voici une parti de mon code:
var children = branch.childNodes;
for (var i = 0; i < children.length; i++) {
var r = i * (360/children.length);
r = "rotate("+r+"deg)";
children[i].style.transform = r;
}
Merci.
Configuration: Macintosh / Safari 15.1
A voir également:
- Changer le style d'un élément de childNodes
- Changer dns - Guide
- Modèle de style word - Guide
- Changer de carte graphique - Guide
- Changer extension fichier - Guide
- Changer wifi chromecast - Guide
3 réponses
Bonjour,
Sans connaitre le code html qui va avec ce bout de code .. ni même le reste du js comme, à minima l'initialisation de ta variable branch .. difficile de te répondre.
Tu pourrais, pour commencer, faire dans ta boucle, un console.log de ta variable pour voir ce qu'elle contient
Sans connaitre le code html qui va avec ce bout de code .. ni même le reste du js comme, à minima l'initialisation de ta variable branch .. difficile de te répondre.
Tu pourrais, pour commencer, faire dans ta boucle, un console.log de ta variable pour voir ce qu'elle contient
console.log(i,children[i]);
Totolego
merci bien j'ai résolu le problème
Voici le code js,
et le code html:
var btn = document.getElementById("mid");
btn.addEventListener("click", addBranch);
function addBranch(){
var branch = document.getElementById("marqueur");
var image = document.createElement("img");
image.src = "branch.svg";
var p = getRandomInt(360);
p = "hue-rotate("+p+"deg)";
image.style.filter = p;
branch.appendChild(image);
var children = branch.childNodes;
for (var i = 0; i < children.length; i++) {
var r = i * (360/children.length);
r = "rotate("+r+"deg)";
children[i].style.transform = r;
}
}
et le code html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Étoile</title>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<main>
<button id="mid"><p>Click to add branch</p></button>
<div id="marqueur">
<img id="nord" src="branch.svg">
<img id="est" src="branch.svg">
<img id="sudest" src="branch.svg">
<img id="sudouest" src="branch.svg">
<img id="ouest" src="branch.svg">
</div>
</main>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
