Y a-t-il un avantage à mettre une classe sur une étiquette de script?

J'ai rencontré ce code

<script class="example" type="text/javascript">

Et était curieux s'il y avait un avantage à l'écrire dans votre code

Je viens de faire un test rapide avec ce balisage:

 <!DOCTYPE html> <html> <head> <style> .foo { display: block; border: 2px solid red; width: 10px; height: 10px; } </style> </head> <body> <script class="foo" type="text/javascript"> alert("can you see me?"); </script> after the script </body> </html>

Le résultat était un bloc rouge sur l'écran et le contenu de la balise de script visible lors de l'exécution de Chrome. IE ne rend pas le contenu du script visiblement du tout. Ainsi, <script> peut être traité comme n'importe quelle autre étiquette, au moins dans Chrome. Je dirais que c'est un oubli de la part de Chrome. Ceci est Chrome 10.0.648.204 sur 32 bits Windows 7.

Effet de rendre le html ci-dessus

EDIT: Firefox 4 rend également la même chose.

EDIT2: cas d'utilisation possible? Utilisez-le en tant que «source d'affichage» pour le script sur votre page pour montrer aux gens comment cela fonctionne, peut-être sur un blog sur JavaScript?

 <!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head> <body> <script class="foo" type="text/javascript"> function foobar() { var a = 1; } </script> after the script <a href="#">show me the script</a> <script type="text/javascript"> $('a').click(function(event) { event.preventDefault(); $("<div>").html($(".foo").text()).appendTo($("body")); }); </script> </body> </html>

Le style visuel n'est probablement pas un bon exemple pour cela. Quelque part où il pourrait être utilisé, il est nécessaire de choisir dynamiquement parmi plusieurs extraits de script à utiliser ailleurs, par exemple avec un langage de javascript.

Manomètre à manivelle: exemple:

 <script class="greeting english" type="text/x-handlebars-template"> <p>Hello {{name}}</p> </script> <script class="greeting spanish" type="text/x-handlebars-template"> <p>Hola {{name}}</p> </script> ... var greeting_template = Handlebars.compile($('script.greeting.' + language).html()); $('#header').append(greeting_template(user));

Le seul avantage que je puisse imaginer pour avoir une propriété de class pour un script est que jQuery peut être en mesure de sélectionner l'élément et de manipuler, par exemple, le dupliquer.

La seule instance que je peux imaginer lorsque cela serait utile est que les balises de script sont ajoutées dynamiquement à une page (fonctionnalité de comète), car c'est l'une des rares fois où vous pouvez réellement interagir avec une étiquette de script.

Je pense qu'il n'est pas correct d'utiliser l'attribut de classe. Selon les écoles maternelles, le script-tag ne prend pas en charge les attributs standard auxquels appartient la propriété de classe. Ainsi, jQuery pourrait le sélectionner lors de l'utilisation du filtrage pour la classe, mais vous n'avez aucune garantie. De plus, il n'est pas certain que le comportement soit identique dans tous les navigateurs.

Selon w3c Standard, comme décrit par w3schools.com, une étiquette de script supporte effectivement les attributs globaux , dont l'un est l'attribut 'classe'. Ainsi, il est parfaitement «légal» d'avoir des étiquettes de script avec un attribut de classe spécifique, et les navigateurs qui se rompent ne sont pas entièrement compatibles avec w3c. L'identifiant global 'id' est également pris en charge par la balise du script.

En ce qui concerne l'utilité éventuelle d'avoir des étiquettes de script avec une 'classe' ou 'id', il faudrait une utilisation très spécifique pour laquelle traverser un document w3c ou une abstraction DOM, avant de l'envoyer à un navigateur client, est Traitées. Dans ce cas, les moyens de modifier les documents peuvent être réalisés à l'aide de la sélection de style css et avoir 'id' et 'class' pour le regroupement de scripts pourraient être utiles pour plusieurs raisons différentes.

C'est un cas étroit et spécifique, mais dans lequel je suis impliqué à ce moment précis. Pour dire qu'il n'y a pas d'utilité, il est étroit d'esprit et de dire qu'il est illégal parce que les normes sont fausses. Il peut ne pas être pris en charge sur tous les navigateurs, mais il n'est pas rare que les navigateurs, même les modernes, interprètent le standard w3c de manière différente et mettent en œuvre leur version de support de normes à leur manière.

Vous pouvez probablement utiliser la classe ou l'id pour effacer votre script écrit à l'intérieur pour des raisons de sécurité comme.

 <script id="erasable" type="text/javascript"> //your code goes here document.getElementById('erasable').innerHTML = ""; </script>

Je ne vois aucun avantage puisque:

Le choix via CSS ne devrait pas faire quoi que ce soit (visuellement)
Le choix via JS n'est pas utile car la duplication, la suppression, etc. ne font rien (puisque l'entrée JS n'est chargée qu'une seule fois – les modifications après les mots sont ignorées).

Un avantage immédiat qui me vient à l'esprit est que Javascript / Jquery / etc peut maintenant sélectionner cet élément de script par le nom de la classe.

Cas possible:

Lorsque vous souhaitez mettre un .png sur un script en utilisant css. Avec l'index z.

L'ajout d'une classe ou d'une ID vous permet de sélectionner la balise de script avec Javascript, puis d'obtenir son contenu, par exemple un objet JSON ou quelque chose. De cette façon, vous évitez de créer une variable globale (en utilisant jQuery ici):

 <script id="datas" type="text/javascript"> {"id": 1} </script> <script type="text/javascript"> // This part of the code should be in a JS module // To avoid creating a global "object" variable var object = JSON.parse($('#datas').html()); console.log(object.id); // Log "1" </script>

Les moteurs de modèles Javascript utilisent cette technique, par exemple ( Guidons ):

 <script id="entry-template" type="text/x-handlebars-template"> <div class="entry"> <h1>{{title}}</h1> <div class="body"> {{{body}}} </div> </div> </script>

Plus à lire sur cette question: Existe – t-il une norme pour intégrer JSON en HTML?

Il est utile d'utiliser la balise de script elle-même comme référence pour les sélecteurs adjacents.

c'est à dire

 .example + iframe {height: none;}

 <script class="example" type="text/javascript" src="//weird-addon.js"> </script>

J'ai trouvé l'ajout d'une classe à une étiquette de script utile dans le développement d'un éditeur de code qui permet de modifier le javascript dans des blocs spécifiques sur une page,

 <div id="idForABlock"> <script class="jsCustomJavascript"> //user generated code </script> </div>