传递JSON参数来改变CSS

我想动态改变一个元素的CSS使用JSON是这样的...传递JSON参数来改变CSS

cssSettings = { 
 
    fontSize: function(fontSize) { 
 
    $(".content").css("font-size", fontSize + "px") 
 
    }, 
 
    color: function(color) { 
 
    $(".content").css("color", color) 
 
    } 
 
} 
 

 
var settings = { 
 
    fontSize: "24", 
 
    color: "red" 
 
} 
 

 
cssSettings(settings)

body { 
 
    background: #9effe5; 
 
    padding: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor dolorum architecto laudantium porro odit! Eligendi consequatur, totam molestiae. Nam laborum quam, accusamus quis distinctio corporis voluptatum repellendus optio voluptatibus dolorum!</div>

可能被剥夺睡眠，但我不能似乎想出如何这样做。

有人可以帮助解释我到底做错了什么？

来源

2016-03-28 Michael Schwartz

的？ – webNeat

你可以做这样的事情。（注意未经测试。）

Css设置需要是一个函数而不是对象。我解决它的方式是循环设置对象，如果在mySettings对象中有一个匹配的函数，它将使用该对象参数调用该函数。

var settings = { 
    fontSize: "24", 
    color: "red" 
} 

var cssSettings = function(opts){ 
    var selector = opts.selector || ".content": 
    var mySettings = { 
    fontSize: function(fontSize) { 
     $(selector).css("font-size", fontSize + "px") 
    }, 
    color: function(color) { 
     $(selector).css("color", color) 
    } 
    }; 

    for (var i in opts) { 
    if (mySettings[i] && typeof mySettings[i] === 'function'){ 
     mySettings[i](opts[i]); 
    } 
    } 

}; 


cssSettings(settings)

其实我喜欢这个想法似乎干净

来源

2016-03-28 00:27:30

我甚至没有考虑过使用for循环。谢谢 –

的一个问题是，你必须在你的代码cssSettings = {...}，但后来尝试调用它作为一个函数的事实：cssSettings(settings)。

我的诚实意见是，你似乎在jQuery的css函数的顶部添加了一个额外的层，因为如果你看看他们的.css() api，默认情况下它能够直接处理一个普通对象。

所以我实际上它重构为：

var settings = { 
    fontSize: "24", 
    color: "red" 
} 

$(".content").css(settings);

这样你就不会引入是不是真的需要额外的开销。

来源

2016-03-28 00:33:51 smaili

使用CSS类像这样：

.error { 
    color: red; 
} 

.tiny { 
    font-size: 0.65em; 
} 

.small { 
    font-size: 0.8em; 
} 

... (etc) ...

与jQuery应用它们像这样：

$(selector).addClass("error"); 
$(selector).addClass("tiny");

这分开，从设计本身更新的设计逻辑。

配售的颜色和字体大小在JavaScript违反分离为什么你使用`cssSettings`的功能，而这是一个普通的对象关注https://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript

来源

2016-03-28 00:41:36 user2182349

我已经知道这一点。这不是问题的焦点。虽然这是很好的做法。 –

传递JSON参数来改变CSS

回答

相关问题