动态更改颜色

Question

我正在使用Materialise和Meteor。我只是想在选择域中更改选择值的背景和文本颜色，以使用我的不同主题。我能够动态更改大多数其他元素，但是到目前为止，这确实是一个痛苦。我尝试过的一切都没有奏效。

我尝试在option上使用包含的辅助类颜色，而没有更改。

我尝试$(".dropdown-content>li>a").css("color", themeColor);只是为了看看颜色是否会改变（建议另一个答案），但仍然没有改变。

我在流星中使用Blaze模板引擎，在Atmosphere中使用Materialize包。

非常感谢您的帮助。

Answer 1

动态更改颜色

有两种可能性，首先是在尝试动态更改CSS之前，尚未完全初始化实现组件（因此不会发生）。其次，您的选择器不够具体。

下面的代码按您的意愿工作。

$( document ).ready(function() {
  $(".dropdown-content.select-dropdown > li span").css("color", "red");
});

NB您是否考虑过将单个主题类应用于文档正文？加载页面后，它将节省大量动态jquery调用。请参见下面的示例。

演示

// Initialise select
$(document).ready(function() {
  $('select').formSelect();
});

// Wait for page to be ready before applying CSS changes
$( document ).ready(function() {
  $(".dropdown-content.select-dropdown > li span").css("color", "red");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field col s12">
  <select>
    <option value="" selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

主题选项

使用CSS选择器，然后将单个类应用于页面正文（或其他一些高级父元素），这将是更好的方法。

这将完全避免初始化问题。

// Initialise select
$(document).ready(function() {
  $('select').formSelect();
});


// Change themes dynamically
$("#blue").click( function() {
  $("body").removeClass("redTheme").addClass("blueTheme");
})
$("#red").click( function() {
  $("body").removeClass("blueTheme").addClass("redTheme");
})

.blueTheme .dropdown-content.select-dropdown > li span {
  color: blue;
}

.redTheme .dropdown-content.select-dropdown > li span {
  color: red;
}


hr {
  margin-top: 20px;
  margin-bottom: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<body>
Select theme:
<button id="red">Red Theme</button> 
<button id="blue">Blue Theme</button>
<hr>

<div class="input-field col s12">
  <select>
    <option value="" selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

</body>

Answer 2

也许您在CSS中使用了!important标记来覆盖该值。或者，您的html尚未完全加载。如果您使用的是chrome浏览器，则可以通过检查元素来查看样式是否被覆盖（如果这不是问题），则应尝试在控制台中手动传递$(".dropdown-content>li>a").css("color", themeColor);。如果颜色发生变化，则表示您遇到计时问题。

实例化CSS-动态更改jQuery中“选择选项”下拉菜单的背景和文本颜色吗？

2 个答案:

动态更改颜色

演示

主题选项