IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Équivalent universel à getElementsByClassName()


Sujet :

JavaScript

  1. #21
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    jQuery n'est pas « nécessaire » au sens premier du mot : tout ce que tu peux faire avec jQuery, tu peux le faire avec du JavaScript pur.

    Je reviens sur les histoires de syntaxe des propriétés CSS. Le mieux est d'écrire deux petites fonctions pour passer du CSS au DOM et inversement :

    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
    function css2dom( prop ){
       return prop.toLowerCase().replace(/-([a-z])/g, function( _, letter ){
          return letter.toUpperCase();
       });
    }
     
    function dom2css( prop ){
       return prop.replace(/[A-Z]/g, function( letter ){
          return "-" + letter.toLowerCase();
       });
    }
     
    // exemples
    var props = [
       "border-radius",
       "CoLoR",
       "Text-Shadow",
       "-moz-animation-play-state",
       "-webkit-animation-play-state"
    ];
     
    props.forEach(function( prop ){
       console.log("%s  ->  %s  ->  %s",
                   prop,
                   css2dom(prop),
                   dom2css(css2dom(prop)));
    });
    Résultats :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    border-radius  ->  borderRadius  ->  border-radius
    CoLoR  ->  color  ->  color
    Text-Shadow  ->  textShadow  ->  text-shadow
    -moz-animation-play-state  ->  MozAnimationPlayState  ->  -moz-animation-play-state
    -webkit-animation-play-state  ->  WebkitAnimationPlayState  ->  -webkit-animation-play-state
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  2. #22
    Membre régulier

    Homme Profil pro
    Inscrit en
    Juin 2011
    Messages
    81
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Seine Saint Denis (Île de France)

    Informations forums :
    Inscription : Juin 2011
    Messages : 81
    Points : 89
    Points
    89
    Billets dans le blog
    2
    Par défaut Q&D proposition solution
    il manque un . dans la déclaration de ton sélecteur.
    Désolé pour cette mauvaise compréhension de la fonction.
    Effectivement cela fonctionne bien mieux ainsi :

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function fRangee ()
    	{
    		document.querySelector('.box').style.display='none';
    		document.getElementById('ombre').style.display='none';
    	}

    Merci pour les deux fonctions. Bien utiles pour s'exercer au principe des Upper & Lower CamelCase

    jQuery n'est pas « nécessaire » au sens premier du mot : tout ce que tu peux faire avec jQuery, tu peux le faire avec du JavaScript pur.
    Non bien sûr, elle semble néanmoins compléter utilement JavaScript à tel point qu'elle se trouve fréquemment pour les sites web.

    À présent que je comprends mieux .QuerySelector et vue la masse d'informations que vous m'avez fournies, je devrais pouvoir parvenir à mes fins.
    J'éditerai ce message afin d'y proposer une solution fonctionnelle.

    Merci pour tout.

    ***

    Proposition de solution

    Code css : 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
    #box
    {
    	display: none;
    	z-index: 3;
    	position: fixed;
    	left: 20%;
    	width: 60%;
    	height: 100%;
    	padding: 0;
    	margin: auto;
    	border: 1px solid black;
    	overflow: hidden;
    	color: yellow;
    }
    #iExposee
    {  
    	max-height:400px;
    	padding: 0;
    }
    #iExposee img {
    	position: relative;
    	max-height: 60%;
    	max-width: 60%;
    	padding: 20px;
    	border: 1px solid yellow;
    	border-radius: 5px;
    	cursor: pointer;
    }
    #ombre
    {
    	display: none;
    	z-index: 2;
    	position: fixed;
    	top: 0%;
    	left: 0%;
    	width: 100%;
    	height: 100%;
    	background-color: black;
    }
    #iCartouche
    {
    	display: inline-block;
    	margin-bottom: 5px;
    	background-color: red;
    }

    Code js : 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
    function fExposee(url) {
      var box = document.getElementById('box'); 
      document.getElementById('ombre').style.display='block';
     
      var title = document.getElementById('iCartouche');
      title.innerHTML = url;
     
      var content = document.getElementById('iExposee');
      content.innerHTML = "<img id='iExposee' onclick='fRangee()' src='../IMG/"+url+"'></img>";
     
      box.style.display='block';	
    }
    function fRangee () {
    		document.getElementById('box').style.display='none';
    		document.getElementById('ombre').style.display='none';
    }
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <?php
    	$nbrif_img=0;
    	$nbrpreg_img=0;
    	$handle=@opendir("../IMG");
    	//echo $handle."<br/>";
    	while ($fichier = @readdir($handle)){
    		$extension=substr($fichier,-3);
    		if (isset($fichier) && $extension == "GIF" )
    		{
    			$nbrif_img++;
    			echo "<p data-tooltip='".substr($fichier, 0, -4)."' onclick=\"fExposee('".$fichier."');\"><img src='../IMG/".$fichier."'></img></p>";
     
    		}
    	}
    ?>

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 2 PremièrePremière 12

Discussions similaires

  1. Réponses: 4
    Dernier message: 21/09/2003, 16h50
  2. Réponses: 3
    Dernier message: 21/08/2003, 15h47
  3. En quoi XML est-il un moyen universel d'échange de données ?
    Par Pomalaix dans le forum XML/XSL et SOAP
    Réponses: 4
    Dernier message: 27/01/2003, 12h29
  4. [postgreSQL] équivalent de la function 'instr'
    Par Dra_Gun dans le forum Requêtes
    Réponses: 2
    Dernier message: 17/01/2003, 17h09
  5. Équivalent du #IFDEF
    Par agh dans le forum Langage
    Réponses: 4
    Dernier message: 14/10/2002, 19h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo