80 votes

Comment incorporer une règle "a: hover {...}" dans un attribut de style au milieu d'un document?

Je sais que l'incorporation directe de styles CSS dans les balises HTML affectées va à l'encontre de la plupart des objectifs de CSS, mais cela est parfois utile pour le débogage, comme dans:

 <p style="font-size: 24px">asdf</p>
 

Quelle est la syntaxe pour incorporer une règle comme celle-ci:

 a:hover {text-decoration: underline;}
 

dans l'attribut de style d'une balise A? C'est évidemment pas ça ...

 <a href="foo" style="text-decoration: underline">bar</a>
 

... puisque cela s'appliquerait tout le temps, par opposition à juste en vol stationnaire.

83voto

Glenn Slaven Points 15742

J'ai peur que cela ne peut pas être fait, le psudo-sélecteurs de classe ne peut pas être jeu en ligne, vous devrez le faire sur la page ou sur une feuille de style.

Je dois mentionner que , techniquement, vous devriez être en mesure de le faire en CSS, mais la plupart des navigateurs ne le supportent pas

Edit: je viens de faire un test rapide avec ceci:

<a href="test.html" style="{color: blue; background: white} 
			:visited {color: green}
			:hover {background: yellow}
			:visited:hover {color: purple}">Test</a>

Et il ne fonctionne pas dans IE7, IE8 beta 2, Firefox ou Chrome. Une autre personne peut test dans tout les autres navigateurs?

20voto

Aleksi Yrttiaho Points 4653

Si vous ne faites que du débogage, vous pouvez utiliser javascript pour modifier le fichier css:

<a onmouseover = "this.style.textDecoration = 'underline';" onmouseout = "this.style.textDecoration = 'aucun';" "barre </a>

16voto

Rodrick Chapman Points 2981

Si c'est pour le débogage, ajoutez simplement une classe CSS pour le survol (puisque les éléments peuvent avoir plus d'une classe):

 a.hovertest:hover
{
text-decoration:underline;
}

<a href="http://example.com" class="foo bar hovertest">blah</a>
 

0voto

adrian Points 339

peut-être vous cherchez quelque chose de similaire à l'orme.style.passez la souris.couleur='rouge' mais ce n'est pas implémentée dans DHTML et probablement ne voulez pas utiliser de classes prédéfinies à l'orme.className="class_name" alors que pensez-vous de cette solution?

l'orme.jCSS("cssText");
l'orme.jCSSPseudo("cssText","pseudoElt");




Je considère que le style de js est digne d'id (1 élément) et pour la classe (plusieurs éléments), une meilleure solution est CSS.

Depuis la syntaxe CSS permet à plusieurs style de spécification dans une chaîne, je veux avoir cette occasion de manière dynamique à partir de js.

DONC: nous allons développer quelque chose comme de l'orme.jCSSHover("color:red;font-size:24px"):

    Element.prototype.jCSSHover=function(txt){// new method for Element

si l'élément n'a pas d'id, j'donner un (voir ci-dessous la fonction dinId())

    if(!this.id)dinId(this);

Je cherche la balise <style> et sinon pour les sorties j'ai créer 1

    var st=document.getElementsByTagName('style');
    if(!st[0]){
            st=document.createElement('style')
            document.getElementsByTagName('head')[0].appendChild(st)    
                } 

Je prends de la chaîne d'entrée, vérifiez une dernière '; " et de la remplacer tous les ';' de ' !important;' .... Le mot"!important " est très IMPORTANT :)) depuis js écrase tous les pseudo CSS

    if(!txt.match(/\w*;$/))txt=txt+';';
    txt=txt.replace(/;/g,' !important;');

Je place dans le <style> #id:hover{}

    tn=document.createTextNode("#"+this.id+":hover {"+txt+"}")
    st[0].appendChild(tn)
    }

Tous ensemble, maintenant et plus générale pour tous les pseudo-style:

    // for dynamic ids
    var dinIdContor=0;
    function dinId(elm){
    if(!elm.id)elm.id="dinId"+dinIdContor++;
    }

    // for the style tag
    mandatoryStyleTag=function(){var st=document.getElementsByTagName('style');
    if(!st[0]){
            var st=document.createElement('style')
            document.getElementsByTagName('head')[0].appendChild(st)    
                }
    }
    window.addEventListener('load',mandatoryStyleTag,false)

    // the elm.jCSSPseudo() method
    Element.prototype.jCSSPseudo=function(cssText,pseudoElt){
    if(!this.id)dinId(this);
    var ps=pseudoElt||'hover';
    if(!cssText.match(/\w*;$/))cssText=cssText+';';
    cssText=cssText.replace(/;/g,' !important;');
    tn=document.createTextNode("#"+this.id+":"+ps+"{"+cssText+"}")
    document.getElementsByTagName('style')[0].appendChild(tn)
    }

Maintenant, nous allons utiliser cette

a=document.getElementsByTagName('a')

txt="color:red;border:2px solid green";

a[0].style.color="green"

a[0].jCSSPseudo(txt); a

a[0].jCSSPseudo("color;white",'active')    

Et parce que je n'aime pas vraiment jQuery pour tout ce que je étendre la-dessus avec

l'orme.jCSS("string") méthode

    Element.prototype.jCSS=function(txt){
var arg=txt.split(";"); 
for(var i=0;i<arg.length;i++){
    var prop=arg[i].split(':');     
    var c_prop='';
    var x=prop[0].split('-');
    for(var v in x){c_prop+=x[v].trim().capitalize()}   
    this.style[c_prop.smallize()]=prop[1];
          }
    } 

lorsque la Chaîne de caractères() de nouvelles méthodes sont:

    String.prototype.trim=function (){ return this.replace(/^\s+|\s+$/g,'');}
    String.prototype.capitalize=function(){return this.charAt(0).toUpperCase() + this.slice(1);}    
    String.prototype.smallize=function(){return this.charAt(0).toLowerCase() + this.slice(1);}      

La méthode de faire des corrections en cas de confusions comme "fontSize:24px" au lieu de "font-size:24px" dans la chaîne d'entrée

DONC: avec le code ci-dessus, nous pouvons à tout moment modifier dynamiquement les multiples paramètres de style pour n'importe quel élément dans le document

l'orme.jCSS("cssText");
l'orme.jCSSPseudo("cssText","pseudoElt");


-1voto

CMPalmer Points 4760

Je ne pense pas que jQuery prend en charge la pseudo-sélecteurs non plus, mais il fournit un moyen rapide pour ajouter des événements à un, de plusieurs ou de l'ensemble de vos contrôles similaires et des étiquettes sur une seule page.

Le meilleur de tous, vous pouvez la chaîne de l'événement se lie et de tout faire en une seule ligne de script si vous le souhaitez. Beaucoup plus facile que de modifier manuellement tout le code HTML pour les activer ou les désactiver. Puis de nouveau, puisque vous pouvez faire la même chose dans le CSS je ne sais pas si il vous achète quelque chose (autre que l'apprentissage de jQuery).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: