Passing JSON Parameter CSS ändern

Question

Ich versuche, wie so ein 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>

könnte Schlafentzug sein, um dynamisch ein Element zu ändern, aber ich kann nicht scheinen herauszufinden, wie man es so macht.

Kann jemand helfen, genau zu erklären, was ich falsch mache?

Answer 1

Sie könnten so etwas tun. (Hinweis ungetestet.)

Css-Einstellungen müssen eine Funktion und kein Objekt sein. Die Art, wie ich damit umgegangen bin, war, das Einstellungsobjekt zu durchlaufen, und wenn es eine passende Funktion im Objekt mySettings gibt, ruft es die Funktion mit den Objekten params auf.

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) 

Ich mag eigentlich diese Idee scheint sauber

Answer 2

Ein Problem ist die Tatsache, dass Sie cssSettings = {...} in Ihrem Code haben, aber später versuchen, es als eine Funktion aufzurufen: cssSettings(settings).

Meine ehrliche Meinung ist, dass es Sie hinzufügen eine zusätzliche Schicht auf der jQuery css Funktion scheint das nicht notwendig ist, denn wenn man einen Blick auf ihrem .css() api nehmen, die standardmäßig direkt ein einfaches Objekt zu handhaben es in der Lage .

So würde ich tatsächlich Refactoring es an:

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

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

Auf diese Weise können nicht zusätzlichen Aufwand einführen kann, die nicht wirklich benötigt wird.

Answer 3

Verwenden CSS-Klassen wie so:

.error { 
    color: red; 
} 

.tiny { 
    font-size: 0.65em; 
} 

.small { 
    font-size: 0.8em; 
} 

... (etc) ... 

Wenden Sie sie mit jQuery wie folgt:

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

Diese trennt die Logik, die das Design von dem Design selbst aktualisiert.

die Farben und Schriftgrößen in der JavaScript-Platzierung verletzt die Separation of Concernshttps://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript