使用 :hover javascript 设置样式

发布于 2024-11-06 23:28:29 字数 388 浏览 0 评论 0原文

据我了解，由于浏览器兼容性，以下方法非常适合设置 CSS 样式。

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

我不能做的是使用 cssText 在 :hover 和 :focus CSS 事件上应用样式。
我该怎么办而不是这个？

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

PS 不要提及使用 javascript 事件，例如 onmouseover 而不是 CSS :hover （它不适合我的情况。）

原文

I understand that the following method is great for setting CSS styles because of browser compatibility.

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

What I can't do is use cssText to apply styles on the :hover and :focus CSS events.

What do I do instead of this?

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

P.S. Don't mention using javascript events such as onmouseover instead of the CSS :hover ( It doesn't fit my situation.)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花开柳相依 2024-11-13 23:28:29

你可以用一些 Voodoo 魔法来做到这一点：

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);

不完全是你所需要的，但如果你愿意，你可以调整它并用它制作一个奇特的功能。

You can do it with some Voodoo magic:

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);

Not exactly what you needed, but you can tweak it and make a fancy function out of it if you want.

回复收藏 0 原文

水波映月 2024-11-13 23:28:29

您始终可以将单独的样式规则添加到现有样式表，而不是创建新的样式元素。大致如下：

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);
    }
}

我改编了 MDN 上的示例
这假设您正在使用一个类（已定义并应用）来添加 :hover 伪选择器，但它也可以很容易地成为 ID 或元素选择器。

如果您无法添加预先定义类或样式规则，您也可以以大致相同的方式动态执行此操作（定义类，定义类：悬停，然后将类应用于所需元素）。

You could always add an individual style rule to an existing style sheet, instead of creating a new style element. Something along the lines of:

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);
    }
}

I adapted the example at MDN
This assumes you are using a class (that is already defined and applied) to add the :hover pseudo-selector to, but it could just as easily be an ID or element selector.

If you were unable to add a class or style rule beforehand, you could also do that dynamically in much the same way (define class, define class:hover, then apply class to desired elements).

回复收藏 0 原文

~没有更多了~