javascript - 传递 JSON 参数来更改 CSS

Question

我正在尝试使用 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>

可能是 sleep 不足，但我似乎不知道该怎么做。

有人可以帮我解释一下我做错了什么吗？

Answer 1

一个问题是您的代码中有 cssSettings = {...}，但稍后尝试将其作为函数调用:cssSettings(settings) .

我诚实的观点是，您似乎在 jQuery 的 css 函数之上添加了一个不必要的附加层，因为如果您看一下他们的 .css() api ，默认情况下它能够直接处理普通对象。

所以我实际上会将其重构为:

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

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

这样您就不会引入不必要的额外开销。