Passing JSON Parameters to Change CSS

Question

I'm trying to dynamically change an elements CSS using a JSON like so...

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>

Might be sleep deprivation, but I can't seem to figure out how to do it this way.

Can someone help explain exactly what I doing wrong?

why are you using cssSettings as a function while it's a plain object ? — webNeat
– webNeat, Commented Mar 28, 2016 at 0:21

smaili · Accepted Answer · 2016-03-28 00:33:51Z

2

One issue is the fact that you have cssSettings = {...} in your code, but later attempt to invoke it as a function: cssSettings(settings).

My honest opinion is that it seems you're adding an additional layer on top of jQuery's css function that isn't necessary, because if you take a look at their .css() api, by default it's able to handle a plain object directly.

So I would actually refactor it to:

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

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

This way you don't introduce additional overhead that isn't really needed.

answered Mar 28, 2016 at 0:33

smaili

1,2359 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Harrington · Accepted Answer · 2016-03-28 00:34:01Z

1

You could do something like this. (Note untested.)

Css settings needs to be a function not an object. The way i tackled it was to loop over the settings object and if there is a matching function in the mySettings object it will call the function with that objects params.

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)

I actually like this idea seems clean

edited Mar 28, 2016 at 0:34

answered Mar 28, 2016 at 0:27

James Harrington

3,22032 silver badges32 bronze badges

1 Comment

Michael Schwartz Over a year ago

I didn't even think about using a for loop. Thanks

user2182349 · Accepted Answer · 2016-03-28 00:41:36Z

0

Use CSS classes like so:

.error {
    color: red;
}

.tiny {
    font-size: 0.65em;
}

.small {
    font-size: 0.8em;
}

... (etc) ...

Apply them with jQuery like so:

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

This separates the logic that updates the design from the design itself.

Placing the colors and font sizes in the JavaScript violates the Separation of Concerns https://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript

answered Mar 28, 2016 at 0:41

user2182349

9,8323 gold badges31 silver badges44 bronze badges

1 Comment

Michael Schwartz Over a year ago

I already know this. This wasn't the focus of the problem. Although it is good practice.

Collectives™ on Stack Overflow

Passing JSON Parameters to Change CSS

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related