[Résolu] Atteindre en JS une valeur ds tranform: rotate();

Bonjour.
J'ai le code CSS suivant :

     #bandeau {
          width: inherit; height: 150px;
          line-height: 150px;
          text-align:center;
          background-color: blue;          
          transform: rotate(-15deg);
          margin-top: -400px;        
          }

J'ai besoin de récupérer en JS le nombre 15 présent dans l'attribut rotate de ce CSS.
J'ai cherché via GOOGLE, hélas faute d'utiliser les bons mos-clés, je n'ai pas trouvé....
C'est assez facile de récupérer un attribut de style simple, tel que " height " par exemple, mais pour " transform " je n'ai pas trouvé la bonne syntaxe....

P.S : je me sers de cet angle pour adapter mon bandeau à son container, et ce par un calcul trigonométrique. Actuellement ma fonction de calcul utilise une constante 'en dur' égale à 15, j'aimerais pouvoir récupérer la valeur présente dans le CSS afin de ne plus avoir cette constante dans ma fonction...

Cdlt
Modifié par ht1cd (10 Aug 2015 - 09:44)

Bonsoir,

J'ai croisé sur le net une technique un peu matheuse pour calculer l'angle : https://css-tricks.com/get-value-of-css-rotation-through-javascript/

Par contre, je me demande pourquoi vouloir récupérer ce "15" dans le CSS alors que ca a l'air assez complexe. Tu pourrais ne pas mettre de rotate dans ton CSS et faire en sorte que ce soit le js qui rajoute le rotate après avoir calculé tout ce qu'il veut et ça c'est plus simple :

document.getElementById('surledos').style.transform = "rotate(180deg)";

@ Laurent : Bonjour.
Merci de votre réponse. J'étais bien loin d'imaginer qu'on ne pouvait pas récupérer cette chaîne de caractères, sauf à faire la transformation très lourde présentée dans votre lien...
J'ai qd même remarqué qu'en initialisant le style comme vous le suggérez ci-dessus, un simple

alert(bandeau.style.transform);

me permet bien de récupérer la chaine concernée, en l'espèce "rotate(-15deg)"...
Mais cela ne m'est bien entendu d'aucune utilité...
Pour répondre plus précisément à votre interrogation. je voulais rendre ma fonction indépendante, i.e, quelquesoit l'angle écrit dans la feuille de style, récupérer cette valeur pour mes calculs...

EDIT : Je pensais avoir trouvé 1 biais, " attaquer " une autre propriété, en l'espèce le bg-color : En fonction de la couleur j'aurais appliqué un certain angle... Hélas en écrivant :

element = document.getElementById('bandeau');
alert( window.getComputedStyle(element).getPropertyValue('background-color') ) ;

j'obiens alors : " rgb(0,0,255) " ce qui ne m'intéresse pas du tout. puisque dans mon CSS il est indiqué "blue"...
Voilà !... Sauf à décrypter le computed style, comme démontré dans le lien que vous avez indiqué, je n'arrive pas à obtenir le texte d'un attribut CSS complexe...
Modifié par ht1cd (10 Aug 2015 - 09:42)

il existe un site ou la sélection d'un couleur permet d avoir le nom textuel prédefini ( le plus proche de la couleur prédéfinie existante .
http://www.color-blindness.com/color-name-hue/
si vous entrer dans les champs RGB les valuer 0 0 255 , le widget vous retourne
Color Blue
Hue Blue


En "étudiant/debuggant" le script vous trouverez la librairie utilisée .

les couleurs prédéfinies sont elles une spécification html ou css
html -> 16 color name
css -> 140/147? color name
it seem some colors value has different name

...................color name ................. ....hue
#FF00FF uchsia/magenta.................violet
#00FFFF aqua/cyan...........................blue


Modifié par 75lionel (09 Aug 2015 - 16:38)

c 'est étrange dans firefox , un fichier css avec background-color:yellow apparait dans le dom sous 2 formes ...
Est il possible par l API CSS de firefox de choisir le formatage pour la valeur de retour de la couleur ? je pense que oui car une focntoin interne a firefox doit convertir les données brute css en rgb pour les donénes relative aux couleurs !!!

Pour rotate il sembe que l on n'a pas acces aux arguments de la valeur de la propriété lorsque celle ci est une fonction ( a plusieurs arguments ) . Il doit bien y avoir un moyen d avoir acces aux arguments de cette fonction ( rotate ) non ?

cordialement

Modifié par 75lionel (09 Aug 2015 - 16:42)

Ce que j'ai retenu de tout cela :
Il faut décryper le "computed style" pour atteindre la propriété CSS visée...
En ce qui me concerne, si je veux atteindre "15" je dois décrypter une infâme matrice, et si je veux atteindre 'blue' je dois décrypter 'rgb(0,0,255)...
Voilà...
Modifié par ht1cd (09 Aug 2015 - 17:33)

on peut passer par une expression réguliere en esperant que les navigateurs utilise la même API .
ici j utilise le fichier css brute ( ne gere pas le cas CSSOM dynamique et donc le statut de la valeur) mais regex peut être adapter à votre solution facilement ? .
=================CSS======================================
dans le ficher html

div { /* lepremier selecteur*/
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

div#myDiv { /*le deuxièmeselcteur */
    -ms-transform: rotate(20deg); /* IE 9 */
    -webkit-transform: rotate(20deg); /* Safari */
    transform: rotate(20deg); /* Standard syntax */
    border: 2px solid red;
}

================code HTML ==========================

<html><head>
<style>
/**fichier css ici **/
</style>
</head>
<body>

<div>
This a normal div element.
</div>

<div id="myDiv">
The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
</div>



</body></html>

================code javascript ==========================
a tester dans differents navigateurs , utilise regex pour extraire la valeur d'une propriété css (ici exemple simplifié car prend en considération le premier item contenant le motif rotate ..... )

function getRotateStatement(selectorcontent) {
    if (!selectorcontent) return '';
    var pattern = /rotate\(([^\)]+)\).*/;
    var match = pattern.exec(selectorcontent);
    return match && match.length > 1 ? match[1] : '';
}

/*on suppose que leselecteur est defini dansle fichier html <style> </style> */
function getRotateStatement1 (className) {
    var a=""; 	
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
    	if(classes[x].selectorText==className) {
    		a= a+  getRotateStatement(document.styleSheets[0].cssRules[x].cssText);
    	}
   }
   return a ; 
}

sheet1=document.styleSheets[0] /*css content  interne */
sheet1rule1=sheet1.cssRules[0] /*le premier  selecteur */
sheet1rule2=sheet1.cssRules[1] /*le deuxième selecteur  */
s1r2t=sheet1rule2.cssText /** le 2em selecteur et sont contenu 
"div#myDiv { transform: rotate(20deg); border: 2px solid red; }"
**/
value1=getRotateStatement(s2r2t) /* return 20deg  */
value2=getRotateStatement1("div#myDiv") /*utilise getRotateStatement  return 20deg*/

cordialement
Modifié par 75lionel (09 Aug 2015 - 17:16)

@ Lionel : Bien vu !...
Effectivement, il faut utiliser document.styleSheets[0].cssRules :

array = (document.styleSheets[0].cssRules) ;
for( j=0; j<array.length; j++) {
     if ( array[j].selectorText == "#bandeau" ) {
          alert(array[j].cssText);
          break;
          }
     }

A moi ensuite, via une regexp, d'extraire ce qui m'intéresse !...
Modifié par ht1cd (19 Aug 2015 - 12:44)

salut,
tu peux aussi te simplifier la vie en passant par l'arctangente :

var element = document.querySelector("#foo"),   // À remplacer par ton élément
    css     = getComputedStyle(element, null).transform, 
    values  = /matrix\((.+)\)/.exec(css)[1].split(",");

var angle = Math.round(Math.atan2(values[1], values[0]) * 180 / Math.PI);

Si tu veux aussi prendre en compte les propriétés préfixées tu devras faire en sorte de les vérifier dans la variable css.

@ Zelaisan : Bonjour, et merci de votre réponse.
Vous avez utilisé la méthode utilisée dans le lien communiqué par Laurent (i.e : Convertir le computed style) et fort probablement en la simplifiant car votre code est concis...
Vous admettrez que cela s'adresse quand même à des matheux...

EDIT : Encore merci aux intervenants, mais surtout à Lionel...
Modifié par ht1cd (19 Aug 2015 - 12:45)

Sans vouloir être ressasseur, ce n'est pas tout à fait la même chose. On passe par getCompitedStyle mais la ressemblance s'arrête là. D'ailleurs en jetant un œil au lien, on voit tout de suite que la méthode est incomplète. En travaillant avec les sinus, si l'angle dépasse les 90°, on ne pourra pas récupérer la vraie valeur. Si on choisit de travailler avec les cosinus, on ne pourra alors pas avoir les valeurs négatives et les valeurs qui dépassent 180°.
La seule solution correcte est de travailler avec l'arctangente. Avec ça, on a le sens de rotation exact.
La solution avec document.styleSheets[0].cssRules est très lourde et je ne vois pas l'utilité de faire avec ça quand on peut calculer directement. De plus, cette solution n'est pas du tout flexible et dépend des fichiers css chargés. Bref, je pense qu'il est plus simple de calculer avec l'exemple que j'ai donné (mais le dernier mot ne me revient pas )

EDIT: Oui il faut être un minimum matheux
Modifié par Zelalsan (10 Aug 2015 - 13:30)