11519 sujets

JavaScript, DOM et API Web HTML5

Exploiter variable Js comme valeur CSS

Bonjour, je suis à la recherche de l'équivalent JavaScript du .getElementById pour l'appliquer à la balise img et sa pseudo-classe :active :

<script type="text/javascript">
var largeur=window.innerWidth / 2+'px';
var longueur=window.innerHeight / 2+'px';
document.getElementById(img:active).style.top='largeur';
</script>


Merci Smiley smile

Édit : En fait, l'idée serait d'utiliser du Js au sein des balises <style type="texte/CSS"></style>
Modifié par orang (21 May 2014 - 03:44)
Merci Raphael,

var largeur=(window.innerWidth) / 2+'px';
var longueur=(window.innerHeight) / 2+'px';
document.getElementsByTag"img:active".style.top='largeur';


Étrange, je n'ai pas trouvé cette fonction ici : http://www.devguru.com/technologies/javascript/index.
Edit : En fait l'idée serait d'appliquer la valeur les variables largeur et longueur aux propriétés CSS 'top' et 'left' de la balise img:active.

img:active { top: longueur ; left: largeur ; }
.
Modifié par orang (20 May 2014 - 18:48)
Administrateur
Je n'ai pas compris ton code ni le rapport avec querySelector Smiley ohwell

De plus, document.getElementsByTag"img:active" n'existe pas.

Ce serait plutôt getElementsByTagName() mais on ne peux cibler que des éléments, pas des états tels que :active. D'où ma proposition d'utiliser querySelector :

var truc = document.querySelector("img:active");


EDIT : j'ai tout de même appris que l'état :active pouvait s'appliquer à autre chose que des liens ou des éléments de formulaire : https://developer.mozilla.org/fr/docs/CSS/:active
Mais je reste curieux : comment détectes-tu que l'image est en état :active ? ça me paraît très tordu
Modifié par Raphael (20 May 2014 - 19:32)
Merci pour ces précisions.
En fait, l'idée du code est d'appliquer les valeurs "largeur" et "longueur" aux propriétés top et left du selecteur img:active.

L'image est détectée comme active lorsque l'utilisateur clique sur l'img.

Autrement, cela pourrait s'écrire comme ceci :
var largeur=window.innerWidth / 2+'px';
var hauteur=window.innerHeight / 2+'px';
 document.write("<style type='text/css'> img:active {left:"+largeur+" ; top:"+longueur+"} </style>");
Sujet clos
Aller à