Mettre un style dans un script javascript

Version imprimable

Bonjour,

Comment puis-je mettre un style dans cette partie de script ?
Code:

1 2 <script>document.addEventListener('DOMContentLoaded', function(event){cookieChoices.showCookieConsentBar('This site uses cookies to offer you the best service. By continuing your navigation, you accept the use of cookies.','✓ Accept', 'Learn more', 'http://site/legal_notice.php');});</script>
quelque chose comme ça mais en javascript ? ,<span style="background-color:#ffffff">'✓ Accept'</span>,

Merci beaucoup ;)

28/05/2018, 17h01
SpaceFrog

https://javascript.developpez.com/fa...ript/?page=CSS
https://javascript.developpez.com/fa...css.javascript
28/05/2018, 21h26
Watilin

Citation:

Envoyé par crastinette

quelque chose comme ça mais en javascript ? ,<span style="background-color:#ffffff">'✓ Accept'</span>,

Bonsoir,
étant donné que la fonction semble déjà accepter du code HTML, à en juger par l’entité ✓, tu ne devrais pas avoir de problèmes à écrire ceci :

Code:

cookieChoices.showCookieConsentBar( ..., '<span style="background-color:#ffffff">✓ Accept</span>', ... );

Sauf si la fonction supprime expressément le HTML des arguments que tu lui passes. Mais ce sera probablement indiqué dans la documentation… S’il y en a une, car en ce qui me concerne, je n’en ai pas trouvé. Il s’agit bien du cookieChoices de Google ?
29/05/2018, 10h00
crastinette

Bonjour Watilin,

Merci pour ta réponse, il s'agit bien du cookiechoices.js de google mais la fonction n'accepte pas de code html, j'ai du récupérer un code qui ne comportait une erreur avec ce rajout de l’entité ✓.
J'aimerai bien pouvoir mettre un fond et une autre couleur sur le bouton accept mais je ne maîtrise pas suffisamment le javascript pour le faire.

Merci

Le code peut être modifié dans le fichier cookiechoices.js, j'ai pu mettre ce que je voulais comme style.

Voici un exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
 function _createDismissLink(dismissText) {
      var dismissLink = document.createElement('a');
      _setElementText(dismissLink, dismissText);
      dismissLink.id = dismissLinkId;
      dismissLink.href = '#';
      dismissLink.style.marginLeft = '15px';
      dismissLink.style.color = '#FFFFFF';
	  dismissLink.style.backgroundColor = '#2e9db0';
	  dismissLink.style.fontSize = '16px';
	  dismissLink.style.padding = "5px 5px 5px 5px";
      return dismissLink;
    }
 
    function _createInformationLink(linkText, linkHref) {
      var infoLink = document.createElement('a');
      _setElementText(infoLink, linkText);
      infoLink.href = linkHref;
      infoLink.target = '_blank';
      infoLink.style.marginLeft = '15px';
      infoLink.style.color = '#2e9db0';
	  infoLink.style.fontSize = '16px';
      return infoLink;
    }

En attendant, merci pour l'aide apportée ;-)

Un gros bravo à Google pour avoir fait une page qui apparaît en première position dans toutes les recherches, et qui ne fournit absolument aucune doc ni même aucun lien vers le fichier js. C’est incroyable ! :mur: J’ai dû trouver le fichier sur un blog lambda, alors j’espère que c’est le bon (a priori il date de 2014).

Dans le fichier que j’ai trouvé, il y a ce passage :
Code:

1 2 3 4 5 6 7 8 9 10 function _setElementText(element, text) { // IE8 does not support textContent, so we should fallback to innerText. var supportsTextContent = 'textContent' in document.body; if (supportsTextContent) { element.textContent = text; } else { element.innerText = text; } }
On y voit que le script utilise textContent (ou innerText quand textContent n’est pas supporté). C’est à cet endroit que ton code HTML est « neutralisé ».

Le script manipule du CSS à certains endroits, mais je ne crois pas qu’il offre une possibilité d’ajouter du style depuis l’extérieur.
Du coup, on a deux solutions :

modifier le script lui-même, comme tu as fait ;) ;
détecter le HTML injecté par le script pour le modifier après coup, ce qui est un peu sale mais demande peu d’efforts.

Au cas où ça intéresse toi ou quelqu’un d’autre, et parce que j’avais déjà commencé à l’écrire (:mrgreen:), voici la marche à suivre pour la seconde solution.

Étant donné qu’aucun des éléments injectés n’a d’id ni de classe, le meilleur moyen de repérer un des éléments injectés est de cibler le lien, car il y a peu de chances qu’un autre lien avec la même adresse soit présent dans la page.

Code:

document.querySelector('a[href="http://site/legal_notice.php"]')

La structure qui est injectée dans le <body> ressemble à ça :
Code:

1 2 3 4 5 6 7 <body> <div> (cookieConsentElement) <div> (wrapper) <span> (consentText) <a> (informationLink) <a> (dismissLink) <a> (dismissIcon)
informationLink est l’élément qu’on est capable de cibler. dismissLink est celui que tu veux modifier. Pour l’atteindre, il suffit :

de remonter au parent (wrapper) ;
de sélectionner le second lien.

Le second lien est également facile à sélectionner à partir du wrapper, car il a un attribut href="#".
(On aurait pû utiliser nextSibling ou nextElementSibling, mais je ne suis pas fan : c’est moins lisible, et peu résistant au changement.)
Ainsi :
Code:

1 2 3 var informationLink = document.querySelector('a[href="http://site/legal_notice.php"]'); var wrapper = informationLink.parentElement; var dismissLink = wrapper.querySelector('a[href="#"]');
Et il ne te reste plus qu’à ajouter le style que tu veux :

Code:

dismissLink.style.backgroundColor = 'white';

En ce qui concerne l’entité, tu peux la convertir en séquence unicode. Il faut commencer par convertir le code en base hexadécimale. Tu peux le faire facilement dans la console F12 :
Code:

1 2 (10003).toString(16) // -> "2713"
Ensuite tu rajoutes '\u' devant et ça te permet d’avoir le symbole dans une chaîne JS tout en évitant les problèmes d’encodage.

Code:

'\u2713 Accept'

Un dernier conseil : vu que tu utilises la même adresse à plusieurs endroits dans le code, je te conseille d’en faire une constante, ça te permettra de n’avoir qu’une seule ligne de code à changer si jamais tu souhaites la modifier par la suite.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const INFO_LINK_URL = 'http://site/legal_notice.php'; document.addEventListener('DOMContentLoaded', function (event) { cookieChoices.showCookieConsentBar( 'This site uses cookies to offer you the best service. By continuing your navigation, you accept the use of cookies.', '\u2713 Accept', 'Learn more', INFO_LINK_URL ); var informationLink = document.querySelector('a[href="' + INFO_LINK_URL + '"]'); var wrapper = informationLink.parentElement; var dismissLink = wrapper.querySelector('a[href="#"]'); dismissLink.style.color = 'white'; dismissLink.style.backgroundColor = '#2e9db0'; dismissLink.style.fontSize = '16px'; dismissLink.style.padding = '5px'; });

29/05/2018, 14h51
crastinette

Merci, c'est très intéressant comme solution, je conserve, merci pour ces recherches très fructueuses.

Il est vrai que le code cookiechoices.js n'est pas disponible, ni les informations qui vont avec, j'ai également récupérer le script sur un site lambda.
C'est assez curieux...
Bonne journée ;)