单击元素时，如何使用knockout.js css-binding更改bg颜色？

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 单击元素时，如何使用knockout.js css-binding更改bg颜色？

所以，我做了一个进步痕迹，但我想让每一次进步变化的背景颜色，当它通过使用CSS knockout.js结合点击。

我如何应用

.selected { 
    color: white; 
    background: #369F00; 
}

样式单击该按钮时，当不同的按钮通过使用CSS knockout.js结合点击它变回原来的颜色？

在此先感谢

来源

2017-05-28 Dukakus17

你的代码示例是不完整的，它并没有表现出任何的淘汰赛/东西JavaScript端。 –

您可以尝试这样的事情。如果你需要完全控制Javascript中的样式，那么它效果很好，否则我会建议将这些样式放入类中，并使用css绑定代替当可观察布尔值为true时应用类。

http://knockoutjs.com/documentation/style-binding.html

var ViewModel = function() { 
 
    this.styling = ko.observable({ 
 
    \t 'color': 'black', 
 
    \t 'background': 'white' 
 
    }); 
 
    
 
    this.changeStyles = function(){ 
 
     this.styling({ 
 
     \t 'color': 'white', 
 
     \t 'background': '#369F00' 
 
     }); 
 
    }; 
 
}; 
 
    
 
ko.applyBindings(new ViewModel());

body { font-family: arial; font-size: 14px; } 
 
.liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div class='liveExample' data-bind='click: changeStyles, style:styling'> 
 
    Some Content 
 
</div>

来源

2017-05-29 06:15:20

这是如何使用CSS数据绑定，保持整洁，有类来解决这个问题。

http://knockoutjs.com/documentation/css-binding.html

var ViewModel = function() { 
 
    this.isSelected = ko.observable(false); 
 

 
    this.changeStyles = function(){ 
 
     this.isSelected(true); 
 
    } 
 
}; 
 

 
ko.applyBindings(new ViewModel());

body { font-family: arial; font-size: 14px; } 
 
.liveExample { padding: 1em; border: 1px solid #CCC; max-width: 655px; } 
 
.selected {color: white; background: #369F00}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 
<div class='liveExample' data-bind='click: changeStyles, css:{selected:isSelected}'> 
 
    Some Content 
 
</div>

来源

2017-05-30 03:48:34

单击元素时，如何使用knockout.js css-binding更改bg颜色？

回答

相关问题