Question

我正在使用Ionic Framework。我有这个要求，我在服务器的对象中获得3种颜色。我们将分别称它们为Color1,Color2,Color3。现在我想要使用Color1的所有按钮，使用Color2的所有超链接和使用Color3的背景。我猜这更像是一个CSS问题，而不是离子问题。那么我如何使用Ionic Framework或Angular属性操作来完成这个呢？

Answer 1

我猜颜色并没有解决，这就是为什么你不能使用简单的CSS课程，所以我建议使用ng-style

http://plnkr.co/edit/0HT65VCUfstvbw0r2Teq?p=preview

  $scope.button = 'color': colors[0]
  $scope.link = 'background-color': colors[1]
  $scope.header = 
    'text-decoration': 'underline'
    'background-color': colors[1]
    color: colors[2]

Answer 2

将所需的CSS样式添加到head。然后只需将CSS类添加到body。

＆＃13;

function addCssRule(rule, css) {
  css = JSON.stringify(css).replace(/"/g, "").replace(/,/g, ";");
  $("<style>").prop("type", "text/css").html(rule + css).appendTo("head");
}

$(function () {

  $('button.btn').click(function () {

    var colors = ['green', 'red', 'yellow'];

    addCssRule('body.color-scheme button', { 'background-color' : colors[0] });
    addCssRule('body.color-scheme a', { 'color' : colors[1] });
    addCssRule('body.color-scheme', { 'background-color' : colors[2] });

    var $body = $('body');
    $body.addClass('color-scheme');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click me!</button>
<a href="http://google.com">Link</a>

＆＃13;

我的代码不是用于生产，它只是一个演示。你需要优化它。

Answer 3

您可以使用angular.element将任务委托给嵌入angularjs的jQuery或jqLite。请参阅下面的示例以更改所有按钮的颜色：

angular.element('button').css('background-color', color1);

基于ajax响应在运行时更改CSS颜色

3 个答案: