当前位置: 首页 > 面试题库 >

如何使用JavaScript读取CSS规则值?

夏俊杰
2023-03-14
问题内容

我想返回一个包含CSS规则所有内容的字符串,就像您在嵌入式样式中看到的格式一样。我希望能够在不知道特定规则中包含什么的情况下执行此操作,因此我不能仅通过样式名称(如.style.width等)将它们拉出。

CSS:

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

到目前为止的代码:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {
        if(classes[x].selectorText==className) {
            //this is where I can collect the style information, but how?
        }
    }
}
getStyle('.test')

问题答案:

以scunliffe的答案为基础:

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

alert(getStyle('.test'));


 类似资料:
  • 问题内容: 谁能帮助我,我有两个问题。 我想做的是使用jQuery动态更改CSS类规则。 在上面的示例中,我有一个现在使用jQuery 命名的类,我想仅通过不添加css内联来更改字体大小,而不更改颜色。 我要创建更改并将其保存到文件,请记住,将存在完整的样式表或没有类名将保存在文件中。 我该怎么做才是最简单,更好的方法? 谢谢! 问题答案: 据我所知,没有jQuery的方法可以做到这一点。可能有一

  • 问题内容: 所以,这就是我正在做的: 我有一张桌子,上面放着所有的桌子。 但是在一个特殊的场合,我希望一个特定的对象在各个方向都有,我将其设置为。 显然,我将CSS样式依次放在一个外部文件中。 但是渲染的CSS仅具有,并且似乎已被覆盖! 请说明: 这是怎么发生的以及为什么发生? 我应该如何安排这些规则来解决我的问题(除了内联样式)? 编辑:我在表中删除之前。我从来没有使用过它,我只是在这里提到它以

  • 问题内容: 我想知道是否有可能在不进行内联样式的情况下修改Css样式表声明。 这是一个简单的例子: 这给出了一个蓝色的书写框,在悬停时变为绿色。 如果我为颜色提供内联样式,则悬停行为将丢失: 无论如何,这都会显示一个红色的书写框。 所以我的问题是,如何能访问和修改css声明对象,而不是用内联样式覆盖样式。 谢谢, 问题答案: 您可以使用与原始样式表相对应的DOM样式表对象上的来修改规则。 请注意,

  • 主要内容:1、常规规则,2、嵌套规则在 CSS 中包含两种语法规则: 普通规则:由选择器、属性和值构成,在之前的学习中我们主要使用的就是这种规则; @规则:以开头后面跟随一个关键字的形式构成,也被称为“AT规则”,根据使用方法的不同又可以分为“常规规则”与“嵌套规则”两种。 本节我们主要来介绍一下 CSS 中的 @ 规则。 1、常规规则 所谓“常规规则”指的是语法类似下面的规则: @[KEYWORD] (RULE); 1) @cha

  • 问题内容: 如何将其写成一行? 用id和class选择html标签的方法是什么? 问题答案: 您所要做的就是用逗号分隔它们,例如

  • 问题内容: 例子不好: 好例子: 我有大量的CSS规则占用太多行。而且我无法弄清楚要使用的命令。 问题答案: 这里是单线: 匹配任何字符,包括换行符,并且是的非贪婪版本,因此匹配匹配的一对花括号之间的所有字符(包括首尾)。 在允许替换Vim表达式,我们在这里用它来去掉所有换行符的结果从匹配的文本(在使用)功能。 逆运算(将单行版本转换为多行版本)也可以作为一个衬套来完成: