legen Sie den Stil mit :hover javascript

Ich verstehe, dass die folgende Methode ist ideal für die Einstellung des CSS-styles, da der browser-Kompatibilität.

element.style.cssText = "color:red;";

Was ich nicht kann, ist die Verwendung cssText zum anwenden von Stilen auf die :hover und :focus CSS-events.

Was mache ich stattdessen?

element.style.cssText = ":focus{color:red;}";

P. S. nicht erwähnt mit javascript-Ereignisse wie onmouseover anstelle der CSS - :hover ( Es passt nicht, meine situation.)

onmouseover ist das gleiche wie hover; befestigen Sie das Ereignis und fügen Sie einfach eine Klasse, und per CSS-style-Klasse. Hat eine höhere Wiederverwendbarkeit.
Warum nur nicht, definieren Sie es in einem normalen css, und ändern Sie nur die Klasse in javascript?
fast. :hover funktioniert nur auf <a> - tags im IE6, aber onmouseover funktioniert auf nahezu allen Elementen. Sie sind ähnlich, aber nicht identisch.
und @Dmitri diese beiden Optionen nicht verfügbar sind, in diesem Umstand. Kennst du eine Methode?

InformationsquelleAutor Web_Designer | 2011-05-15

  1. 9

    Können Sie es mit einigen Voodoo-Magie:

    var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
var declarations = document.createTextNode('selector:pseudo { property: value }');

style.type = 'text/css';

if (style.styleSheet) {
  style.styleSheet.cssText = declarations.nodeValue;
} else {
  style.appendChild(declarations);
}

head.appendChild(style);

    Nicht genau, was Sie brauchte, aber Sie können Sie modifizieren und stellen Sie eine ausgefallene Funktion aus, wenn Sie möchten.

    Was ist die "Voodoo-Magie"? Bitte erklären. Ich sicher nicht, wie die Konnotationen.
    "Voodoo-Magie" -> unintuitive Lösung.

    InformationsquelleAutor Blender

  2. 1

    Man konnte immer fügen Sie eine individuelle style-Regel auf ein vorhandenes Stylesheet, statt der Schaffung einer neuen Stil-element. Etwas entlang der Linien von:

    function addStyle() {
    var style = document.styleSheets[0];        //select style sheet (0==first)
    var styleSel = ".class:hover";              //define selector
    var styleDec = "color: red;";             //define declaration

    if(style.insertRule) {        //for modern, DOM-compliant browsers

        style.insertRule(styleSel+'{'+styleDec+'}', style.cssRules.length);
        //I chose to do it this way to more easily support the addRule method, but
        //know that insertRule only needs two parameters, full style rule
        //(selector+prop/value declarations), and index to insert rule at
        //                 styleSheets[0].insertRule(rule, index);

    }else {                       //for IE < 9
        style.addRule(styleSel, styleDec, -1);
    }
}

    Ich angepasst, die Beispiel MDN

    Dies setzt Voraus, Sie sind mit einer Klasse (das ist bereits definiert und angewandt werden), fügen Sie die :hover-pseudo-Selektor, aber es könnte sich genauso gut um eine ID oder ein element-Selektor.

    Wenn Sie nicht in der Lage waren, um eine Klasse oder style-Regel im Voraus, Sie könnte auch tun, die dynamisch in viel die gleiche Weise (Klasse definieren, definieren Sie Klasse:hover, dann bewerben Sie Klasse, um die gewünschten Elemente).

    InformationsquelleAutor Chase

Schreibe einen Kommentar