Question

我正在尝试使用像这样的JSON动态更改元素CSS ...

s = '  hello world!   '
s1 = s.strip()
first_index = s.find(s1)
end_index = first_index + len(s1) - 1

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;
}

可能会被剥夺睡眠，但我似乎无法弄清楚如何这样做。

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

Answer 1

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

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

所以我实际上会将它重构为：

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

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

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

Answer 2

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

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)

我其实这个想法似乎很干净

Answer 3

使用 CSS类，如下所示：

.error {
    color: red;
}

.tiny {
    font-size: 0.65em;
}

.small {
    font-size: 0.8em;
}

... (etc) ...

像jQuery一样应用它们：

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

这将更新设计的逻辑与设计本身区分开来。

在JavaScript中放置颜色和字体大小违反了关注点分离 https://en.wikipedia.org/wiki/Separation_of_concerns#HTML.2C_CSS.2C_JavaScript

传递JSON参数以更改CSS

3 个答案: