Modifier les valeurs des propriétés d'un sélecteur

**marcel marie** · 25/02/2015, 18h44

Bonjour,
J'avais ouvert une discussion équivalente et je voudrais la supprimer car je me suis mal expliqué ce qui a entrainé des réponses hors sujet. Est-ce possible ? Je l'ai fermée ....
Voici mon script ci-dessous.
Entre les lignes 5 à 12 j'ai la description de la classe .ladiv
Cette classe sert à afficher le <div ... > de la ligne 51 et c'est correct.
Autour des lignes 29 à 34 je voudrais écrire des instructions qui permettent de changer les valeurs des propriétés de la classe .ladiv.
SVP Comment écrire une ligne pour ce faire ? J'ai trouvé sur Internet plusieurs exemples que j'ai essayés de reproduire mais je ne réussis pas à obtenir le résultat espéré. Où est l'erreur de ma part ?

Merci de vous en tenir à ce point. Je sais que les puristes vont trouver des choses à redire sur d'autres points du script. Je sais que je ne suis pas forcément à la mode et que je n'ai pas suivi les dernières normes !!. Mais hormis le point signalé, le reste tourne correctement.

Marcel Marie

Code html :

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

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
<head>
<title></title>
<style type="text/css">
  .ladiv
  {
    position: absolute;
    top: 100px ;
    left: 60px ;
        width: 900px;
        height: 1200px;
  }
</style>   
</head>
<body> 
<script type="text/javascript">
if (document.body)
{
var larg = (document.body.clientWidth);
var haut = (document.body.clientHeight);
} 
else
{
var larg = (window.innerWidth);
var haut = (window.innerHeight);
}
document.write("Cette fenêtre fait " + larg + " de large et "+haut+" de haut"); 
 
var divTest = document.getElementById("ladiv");
divTest.style.top = "300px";
divTest.style.left = "600px";
 
//document.getElementById("ladiv").style.top = "300px";
//document.getElementById("ladiv").style.left = "600px";
</script> 
 
<script language="javascript">
function showLayer(sName) {
	if (self.document.all)
		self.document.all[sName].style.visibility = "visible"	//hidden
	else
		self.document.layers[sName].visibility = "show"; //hide
}
function hideLayer(sName) {
	document.getElementById(sName).style.visibility="hidden";
}
</script>
 
 
 <!--<div id="texte" class="texte" style="position: absolute; top: 100; left: 300; width: 900; height: 1200"> -->
 <div id="texte" class="ladiv" style="position: absolute" >  
  <table border="1">
    <tr>
      <td bgcolor="#7CFC00"><font color="#000000">Juste pour un essai à transformer</font></td>
    </tr>
    <tr>
      <td colspan="2" bgcolor="#7CFC00" bordercolor="#FF0000"><font color="#00FF00"><a style="color: red" href="javascript:hideLayer('texte');"><b><p align="center">Cliquer ICI supprime cette Fenêtre </p></b></a></font></td>
    </tr>
  </table>
</div>
 
</body>
</html>

**NoSmoking** · 25/02/2015, 22h04

Bonjour,

J'avais ouvert une discussion équivalente et je voudrais la supprimer car je me suis mal expliqué ce qui a entrainé des réponses hors sujet. Est-ce possible ? Je l'ai fermée ....

il me semble qu'une explication à ceux qui se sont donné la peine de répondre ne serait pas incongru.

Où est l'erreur de ma part ?

Comme souvent rencontré et rappelé, il ne faut pas chercher à manipuler un élément qui n'existe pas encore dans le DOM.
- document.getElementById("ladiv") arrive avant que l'élément n'apparaisse dans le BODY

D'autre part
- document.getElementById("ladiv") signifie que l'on cherche un élément à partir de son ID or dans ton code AUCUN élément ne posséde d'ID="ladiv"

Merci de vous en tenir à ce point.

et si on veut pas...

...bon ok! je cours me laver les yeux, mais il me semblais qu'une des forces de l'homme était de s'adapter et de progresser !

**Watilin** · 26/02/2015, 01h56

Envoyé par marcel marie

Autour des lignes 29 à 34 je voudrais écrire des instructions qui permettent de changer les valeurs des propriétés de la classe .ladiv.

Une question pour clarifier : est-ce que tu veux modifier l'apparence de la <div> actuellement présente (1), ou bien de toutes les <div>, présentes et futures, de la page (2) ?

Si c'est le premier cas, il te suffit de sélectionner correctement la <div> par son id :
document.getElementById("texte"). Tu as aussi une façon alternative document.getElementsByClassName("ladiv")[0] mais tu conviendras qu'elle est moins pratique, et en plus elle ne sera pas compatible avec les navigateurs les plus vieux – à en juger par certains points dans ton code, tu as l'air de vouloir assurer une rétro-compatibilité assez poussée… Mais on a dit qu'on n'en parlait pas

Une autre méthode encore plus récente (donc encore un peu moins compatible) : document.querySelector(".ladiv").

Dans le second cas, tu vas devoir modifier « en vol » ta déclaration de style. Je ne sais pas du tout quelle compatibilité ça assure… L'idée est d'accéder aux feuilles de style via document.styleSheets, de trouver la bonne dans le tas, puis d'accéder à son jeu de règles cssRules, de trouver la bonne règle, et enfin de modifier cette règle. Par chance, tu n'as qu'une seule feuille dans ta page et une seule règle dans cette feuille.
Ensuite, tu peux modifier le code CSS de la règle via sa propriété cssText, ou bien (mais je crois que c'est un ajout récent), par sa propriété style qui fonctionne comme avec les éléments HTML normaux.

Code :

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

1
2
3
4
5
6
7
var laDivRule = document.styleSheets[0].cssRules[0];
 
// avec cssText il faut réécrire toute la déclaration, c'est assez peu pratique
laDivRule.cssText = ".laDiv { position: absolute; ... etc. }";
 
// avec style c'est plus simple mais je ne garantis pas que ça marche, il faut faire des tests
laDivRule.style.left = "-30px";

**Bovino** · 26/02/2015, 11h26

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script language="javascript">
function showLayer(sName) {
	if (self.document.all)
		self.document.all[sName].style.visibility = "visible"	//hidden
	else
		self.document.layers[sName].visibility = "show"; //hide
}
function hideLayer(sName) {
	document.getElementById(sName).style.visibility="hidden";
}
</script>

C'est bon de rire de temps en temps.

Mais promis, je ne ferai pas de commentaire, notamment, je ne te conseillerai pas de mettre ton internet à jour.

**SpaceFrog** · 26/02/2015, 11h38

ça m'a rajeuni d'un coup là ...

"all" y'avait longtemps ...

**NoSmoking** · 26/02/2015, 21h15

"all" y'avait longtemps ...

j'avais plutôt percuté sur self.document.layers[sName].visibility = "show"; compte tenu de l'exclusivité NS4...mais comme a dis marcel marie

Merci de vous en tenir à ce point.

**SylvainPV** · 26/02/2015, 21h21

Je voulais aider mais je me suis arrêté à la remarque

Merci de vous en tenir à ce point.

C'est comme faire venir un médecin sur un champ de bataille jonché de blessés à l'agonie puis lui dire "Docteur, je me suis foulé la cheville, merci de vous en tenir à ce point."

**marcel marie** · 27/02/2015, 18h56

Bonjour,
Décidément il y en a toujours qui ont envie de montrer leur savoir !!!! Mais ça les fait rire, c'est toujours ça ....
Je vous ai posé une question, répondez à ma question SVP ..... si vous savez évidemment (ce qui n'est pas certain) !!!!!!!!!!, puisque je vous l'ai demandé et surtout parce que le reste fonctionne très bien sur 4 navigateurs au moins et que le visiteur s'en fout royalement de la façon dont est écrit le script.

Bon week end.
Marcel Marie.

Modifier les valeurs des propriétés d'un sélecteur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager