我现在可能很累并且想法很奇怪,但我根本找不到如何检索元素的聚焦、悬停或访问状态中定义的 CSS 属性的值。目标是使用 Javascript 中的值。
重要的: I 不需要获取聚焦/悬停/访问的元素。我想访问某些任意元素的值在 DOM 中为以下状态定义的 CSS 属性: :focus
, :hover
and :visited
.
这些伪类在这种情况下似乎没有帮助,所以我是否需要触发相应的状态才能访问这些值?
应该比这个简单……或者不是吗?
P.S.:用纯 Javascript 或 jQuery 回答即可。
是的,您可以通过阅读样式表来实现这一点。
您可以通过使用 document.styleSheets 来获取它;下面是示例和 jsfiddle 链接。
http://jsfiddle.net/wt3qQ/ http://jsfiddle.net/wt3qQ/
For 安全原因、Opera 和 Mozilla 不会允许您访问
来自另一个域的样式表的 cssRules 集合或
协议。尝试访问它会抛出一个违反安全规定
错误
function getStyleBySelector( selector )
{
var sheetList = document.styleSheets;
var ruleList;
var i, j;
/* look through stylesheets in reverse order that
they appear in the document */
for (i=sheetList.length-1; i >= 0; i--)
{
ruleList = sheetList[i].cssRules;
for (j=0; j<ruleList.length; j++)
{
if (ruleList[j].type == CSSRule.STYLE_RULE &&
ruleList[j].selectorText == selector)
{
return ruleList[j].style;
}
}
}
return null;
}
console.log(getStyleBySelector('a:hover').color);
console.log(getStyleBySelector('#link:hover').color);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)