通过下拉列表接收的 JQuery 变量未应用 css

Question

我知道可以使用变量作为 jQuery 应用的 css 属性(使用 .css('property',variable))，但由于某种原因，成功的变量got 没有被放入 css。

这是我的 JQuery 代码:

    $('#color-scheme').change(function(){
      var colorScheme = $('#color-scheme').val();
      $('.wppw-title-font-color').css('color','');
      $('.wppw-background-color').css('background-color','');
      $('.wppw-title-font-color').css('color',colorScheme);
      $('.wppw-background-color').css('background-color',colorScheme);
      console.log(colorScheme);
    });

我目前正在做的元素的演示可以在这里找到: http://codepen.io/zephyr/pen/ipsHu

我希望用户能够通过我创建的菜单更改我的 fancybox 的样式。 (我只想使用 JQuery 来执行此操作，以接受有关我可以在菜单上进行的更改的建议，以便更轻松地获得所需的结果。)

谢谢!

感谢您的回复，原来我是个笨蛋，没有删除 !important 的 css 属性，我的错!

Answer 1

它不起作用，因为 !important 规则附加到您要更改的内容。试试这个:

$('#color-scheme').change(function(){
  var colorScheme = $(this).val();
  $('.wppw-title-font-color').css('cssText', 'color: ' + colorScheme + ' !important;');
  $('.wppw-background-color').css('cssText', 'background-color: ' + colorScheme + ' !important;');
  console.log(colorScheme);
});

还有其他方法可以做到这一点，看看this question .

编辑: 要使其适用于您的字体选择，您需要从选择的值末尾删除分号 (;)。