Tester si un style est appliqué sur un élément

**Kagami** · 24/06/2015, 01h47

je cherche comment faire pour appliquer un style sur un div (#all-Type) genre :
ce code ne marche pas :/

Code :

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

1
2
3
4
5
<script> 
	if( $('#all-type').css('margin-top') == '50%'){
	$("#all-type").css('position') == 'fixed');
}
	</script>

**www.diazis.com** · 24/06/2015, 10h34

Bonjour,

Voilà ce que je proposerais en javascript si #all-Type est l'id du div:

Code :

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

1
2
3
4
allType = document.getElementById('#all-Type');
if (allType.style.marginTop == '50%') {
  allType.style.position = 'fixed';
}

**SpaceFrog** · 24/06/2015, 12h57

Pour savoir pourquoi ton code ne fonctionne pas, as tu testé :

Code :

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

console.log( $('#all-type').css('margin-top') )

**Kagami** · 24/06/2015, 17h55

bonjour,
avec ce code on me donne rien sur console :

Code :

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

1
2
3
4
5
6
7
<script> 
	if( $('#all-type').css('margin-top') == '50%'){
	$("#all-type").css('position') == 'fixed';
 
  console.log( $('#all-type').css('margin-top') )
}
	</script>

mais avec le code que m'a donné diazis :

Code :

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

1
2
3
4
5
6
7
<script>  
allType = document.getElementById('#all-Type');
if (allType.style.marginTop == '50%') {
  allType.style.position = 'fixed';
   console.log( $('#all-type').css('margin-top') )
}
	</script>

ça m'affiche une sorte d'erreur :
Uncaught TypeError: Cannot read property 'style' of null

**NoSmoking** · 24/06/2015, 19h54

Bonjour,
il semblerait à première vu que tu cherches à faire appel à l'élément AVANT qu'il ne soit dans le DOM, jQuery ne déclenche pas d'erreur car il retourne un objet jQuery vide, c'est pas cool pour ceux qui débutent, mais en javascript "pur" cela engendre une exception qui plante.

Concernant la source que t'a indiqué www.diazis.com elle ne fonctionnera que si le style est mis inline, dans le cas contraire il faut passer par un window.getComputedStyle ou un oElem.currentStyle.

Maintenant parlons des 50% affecté à ta margin-top, sauf si cela est mis en inline, tu n'aura pas un retour en % mais en px, donc il va te falloir faire autrement.

**www.diazis.com** · 24/06/2015, 21h14

Es tu sur que ton div a pour id '#all-Type' ?

le code suivant affiche bien 50%

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="#all" style="height: 50px; width: 50px; margin-top: 50%; background-color:red;">
 
    </div>
    <script>
      temp = document.getElementById('#all');
      alert(temp.style.marginTop);
    </script>
  </body>
</html>

**NoSmoking** · 24/06/2015, 21h59

Es tu sur que ton div a pour id '#all-Type' ?

Attention, il n'est pas conseillé de faire commencer une ID par un # même si cela fonctionne, que dit la recommandation :

Envoyé par w3.org/TR/html4/types.html

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

le # sert au CSS pour définir que le sélecteur concerne un élément ayant pour ID ce qui suit #id_de_la_div{}, il sert également pour cibler une ancre <a href="#ancre">et en jQuery, ce qui est le cas de Kagami, il permet d'identifier que l'on est en présence d'une ID, comme pour le CSS.

le code suivant affiche bien 50%

oui car comme je l'ai précisé le CSS est inline.

**Kagami** · 25/06/2015, 00h22

bonjour,
pour être précise, je cherche à fixer mon div lorsque je descend en bas et qu'il ait le margin-top = 5%

la première img c'est avant que je descend:

Nom : pic1.png
Affichages : 1218
Taille : 1,41 Mo

Nom : pic1.png
Affichages : 1218
Taille : 1,41 Mo

la deuxième montre le div fixé dans un certain margin-top que je dois précisé ( & 5% par exemple)
Nom : pic2.png
Affichages : 1225
Taille : 1,01 Mo

je ne sais si tout est bien expliqué .. :/
merci

**www.diazis.com** · 25/06/2015, 14h17

Bonjour,

Si je comprends bien, il faut que tu gères l'évènement scroll.

Voici un exemple (toujours en javascript).

Code :

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
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id="myPage" style="height: 1000px;">
      <div id="all-type" style="height: 100px; width: 50px; background-color:red; margin-top:250px;">
      </div>
    </div>
    <script>
      if (window.addEventListener) {
        window.addEventListener('scroll', checkScroll, false);
      } else {
        window.attachEvent('onscroll', checkScroll);  
      }
      function checkScroll () {
        myDiv = document.getElementById('all-type');
        if (document.documentElement.scrollTop != 0) {
          myDiv.style.marginTop = '40px';
          myDiv.style.position ='fixed';
        } else {
          myDiv.style.marginTop = '250px';
          myDiv.style.position ='relative';
        }  
      } 
    </script>
  </body>
</html>

Il faut bien sur que tu adaptes :
Bouger la div en fonction de la valeur du scroll ou de la position relative de ta div all-type.
Remettre la div à sa position initiale...

Comme je crois comprendre que tu veux mettre ta div en dessous de ta barre de menu, il faut mieux que tu gères la marge en px plutôt qu'en %.

@NoSmoking comme tu as du le voir, je connais pas jquery donc je ne savais pas que le # permettait d'identifier un id. Mais effectivement suis 100% en phase sur le nommage. Ok aussi pour le inline.

Tester si un style est appliqué sur un élément

jQuery

Discussions similaires

Partager

Partager