傳遞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

回答

相關問題