Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/381.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/32.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/arduino/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我可以将CSS类放入对象中吗?_Javascript_Css - Fatal编程技术网

Javascript 我可以将CSS类放入对象中吗?

Javascript 我可以将CSS类放入对象中吗?,javascript,css,Javascript,Css,我在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"}; 有什么东西可以做到这一点吗?文档。样式表是页面上所有样

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

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

文档。样式表是页面上所有样式表的数组

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

document.styleSheets[0].cssRules[0]

Docs

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

扫描
文档.样式表
中的选择器

用法:

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

函数cssCamelCase(名称){
var parts=name.split(“-”);
如果(零件长度<2)
返回名称;

对于(var i=1;i请看一下这些问题,看看它们是否解决了您的问题:和。它们非常复杂,我记得使用了其中一种解决方案。DzikiMarian的回答基本上就是这样。我不确定“获取节点的样式”这种方法可以满足OP的要求,因为其他样式也可能适用。在控制台中的这个页面上很容易测试。
css2Obj('pre'))=>null
。但是all.css中定义了许多规则。是的,很遗憾,似乎只有来自同一域的css文件加载到文档中。样式表这很奇怪。它告诉我document.styleSheets[0]是一个对象,它具有指向我的css文件的右href,该文件包含两个在我的页面上成功应用的规则,但document.styleSheets[0]。cssRules和document.styleSheets[0]。规则为空。啊,这是一个chrome问题。
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;
}