我可以把一个CSS类放入一个对象中吗？

Question

我有一个CSS文件中的这段代码：

.name-search 
{
border: 2px solid blue;
border-radius: 5px;
}

我想要一个函数，可以从这个内容创建一个简单的JavaScript地图。

因此，对于上述CSS类，

var x = getCSSMap("name-search");

将其翻译成中文是“相当于”。

var x = {"border": "2px solid blue", "border-radius": "5px"};

这里有没有类似的东西可以做到这个？

- Dan Cancro

---

请查看以下问题，看看它们是否解决了您的问题：https://dev59.com/93RA5IYBdhLWcg3w_DHF 和 https://dev59.com/X2445IYBdhLWcg3wmLdd。它们非常详细，我记得曾经使用过其中一个解决方案。 - Matyas

基本上就是那样，和DzikiMarian的回答一样。 - Fabrício Matté

我不确定“获取节点样式”的方法是否能够满足OP的需求，因为可能还有其他样式也会应用。 - nrabinowitz

Answer 1

document.styleSheets是页面上所有样式表的数组。

要获取页面上第一个样式表中的第一条规则，可以使用以下代码：

document.styleSheets[0].cssRules[0]

文档 http://www.javascriptkit.com/domref/stylesheet.shtml

这是一个关于CSS样式表的文档，可以帮助你更好地掌握CSS技术。请点击链接查看文档。

- claustrofob

---

这很奇怪。它告诉我document.styleSheets[0]是一个对象，并且它具有正确的href指向我的CSS文件，其中包含两个规则，这些规则在我的页面上成功应用，但是document.styleSheets[0].cssRules和document.styleSheets[0].rules为空。 - Dan Cancro

啊，这是一个Chrome的问题。 - Dan Cancro

Answer 2

如果未找到精确选择器，则会返回null，或者返回一个对象，其中CSS样式作为属性名称，使用对象表示法的驼峰式命名法，使用数组表示法的标准名称。需要进行调整以允许多个选择器等。

扫描document.styleSheets以查找选择器。

用法：

var cssobj = css2Obj(".MyStyle");
console.log( cssobj["font-size"] );
console.log( cssobj.fontSize );

代码

function cssCamelCase(name) {
    var parts = name.split("-");
    if( parts.length < 2 )
        return name;
    for(var i=1; i<parts.length;i++) {
        parts[i] = parts[i].charAt(0).toUpperCase() + parts[i].slice(1)
    }
    return parts.join("");
}
function css2Obj(selector) {
   var cssobj = null;
   for(var i=0; i<document.styleSheets.length; i++) {
    if( document.styleSheets[i].cssRules !== null ) {
        var sheet=document.styleSheets[i];
        for(var b=0; b<sheet.cssRules.length; b++) {
            var rule = sheet.cssRules[b];
            if( rule.selectorText == selector ) {
                var style = rule.style;
                if(cssobj === null) 
                    cssobj={};
                for(var c=0; c<style.length; c++) {
                    cssobj[style[c]] = style[cssCamelCase(style[c])];
                    cssobj[cssCamelCase(style[c])] = style[cssCamelCase(style[c])];
                }
            }
        }
    }
   }
   return cssobj;
}

- Patrick Evans

---

在控制台上测试这个页面很容易。css2Obj('pre') => null。然而，在all.css中定义了许多规则。 - dfsq

很遗憾，看起来只有来自同一域的 CSS 文件才能加载到 documents.styleSheets 中。 - Patrick Evans