Discussion :

[dominos]

Bonjour,

Savez-vous s'il est possible de récupérer un background d'une balise <li> pour la mettre dans une balise <div> ? Voici un bout de code simplifié de ce que je cherche à faire...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function change(id) {
 
	document.getElementById("testdiv").style.backgroundImage = document.getElementById(id).style.backgroundImage;
 
	//alert(document.getElementById(id).style.backgroundImage);
 
}

Si vous avez une idée... merci d'avance...

[javatwister]

Bonjour,


Quel est le problème?

[Invité]

Bonjour,

1- on peut utiliser .style.backgroundImage uniquement si le style est défini dans la balise ("style en ligne").

2- si les styles CSS sont définis dans un fichier externe (ou entre <style>), alors il faut utiliser window.getComputedStyle() :


ex. : (puisque tu n'as pas pris la peine de fournir un exemple.... )

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
  <li onclick="change(this)">jreaux62</li>
  <li onclick="change(this)">NoSmoking</li>
</ul>
<div id="testdiv"></div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
div, li { width:100px; height:100px; }
li { background:url(https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1584546840) no-repeat;
}
li:first-child { background:url(https://www.developpez.net/forums/avatars/256045-jreaux62.gif?dateline=1584546840) no-repeat;
}
li:last-child { background:url(https://www.developpez.net/forums/avatars/405341-nosmoking.gif?dateline=1420739142) no-repeat;
}

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function change(elt) 
{
  var bkgd = window.getComputedStyle(elt).getPropertyValue('background-image');
  document.getElementById("testdiv").style.backgroundImage = bkgd;
}

[dominos]

Merci jreaux62, c'est exactement ce que je cherchais à faire. A la différence de ton exemple, j'avais ajouté un id dans chaque balise <li>.

Bonne journée !