使用 :hover javascript 设置样式
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6006763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
set style with :hover javascript
提问by Web_Designer
I understand that the following method is great for setting CSS styles because of browser compatibility.
我知道由于浏览器兼容性,以下方法非常适合设置 CSS 样式。
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?
我不能做的是cssText
在:hover
和:focus
CSS 事件上应用样式。
我该怎么做而不是这个?
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.)
PS不要提到使用javascript事件onmouseover
代替CSS :hover
(它不适合我的情况。)
采纳答案by Blender
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.
不完全是您所需要的,但是如果您愿意,您可以对其进行调整并从中制作出精美的功能。
回答by Chase
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).
我改编了MDN 上的示例
这假设您正在使用一个类(已经定义和应用)来添加 :hover 伪选择器,但它也可以很容易地成为 ID 或元素选择器。
如果您无法事先添加类或样式规则,您也可以以几乎相同的方式动态添加(定义类,定义类:悬停,然后将类应用于所需的元素)。