3

我在 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"};

有什么东西可以做到这一点吗?

4

2 回答 2

4

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

要获取页面上第一个样式表的第一条规则,您可以使用:

document.styleSheets[0].cssRules[0]

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

于 2013-06-30T19:29:29.700 回答
3

搜索精确选择器将返回 null 如果未找到,或者以 css 样式作为属性名称的对象,camelcased 用于对象表示法,标准名称用于数组表示法。需要调整以允许多个选择器等。

扫描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;
}
于 2013-06-30T19:43:40.250 回答