Question

假设我有一个背景颜色为＃333333的div，我有一个输入字段，用户可以输入自己的十六进制值，例如：＃000000，然后我想要div的背景颜色在飞行中变为＃000000 ....

例如： HTML：

<div class="mydiv"></div>

css：

<style type="text/css">.mydiv { background-color:#333333; }</style>

然后，当用户通过输入类型=＆＃34; text＆＃34;更改值时字段，当CSS应该改变样式=＆＃34; text / css＆＃34;块。

如何进行绑定？我不能在我的样式块中使用，因为那不是有效的CSS，我不想在我的喜欢上做这件事，然后在这里插入样式......所以，我想改变我的样式块中的CSS，而不是我的div元素添加样式。

有点像这样他们在飞行中更新它; http://css3gen.com/box-shadow/ 当您更改某些内容时，后面的CSS会发生更改，以便您可以即时预览元素。

Answer 1

使用样式绑定

   <div data-bind='style: { "backgroundColor": CustomBGC }'>

http://jsfiddle.net/nyothecat/jKysB/3/

修改由于您要更新样式，因此可以使用级联样式表。

使用init颜色定义类，然后使用文本结合创建样式标记。用你的新颜色填充这个。

在你的css文件中：

.myClass { background-color: #f00 }

请务必将您的css文件放在以下
之前
<div id="koRoot"> <div class="myClass"> <input type='text' data-bind="value: customColor" /> </div> <style data-bind="text: myObservableStyle(customColor)"></style> </div>

和javascript：

$(document).ready(function () { var ViewModel = { customColor: ko.observable("#f00"), myObservableStyle: function (obs) { return ".myClass { background-color: " + obs() + " }"; } } ko.applyBindings(ViewModel, document.getElementById("koRoot")); });

http://jsfiddle.net/k97ZZ/1/

Answer 2

pseudohtml：

<input type="text" data-bind="value:userInput">

pseudoscript：

var MyModel=function(data){
   var self=this;
   self.userInput=ko.observable('#333333');
   self.computedCss=ko.computed(function(){
      //appends Style block to head everytime userInput changes
      appendal="<style>.myClass { background-color: "+self.userInput()+";!important}</style>";
      $('head').append(appendal);
   }
}

myModel = new MyModel({});
ko.applyBindings(myModel);

Answer 3

您可以将style binding与value binding

一起使用

 <input data-bind="value: inputColor" />
  <div data-bind="style: { color: inputColor()}">

  Something

</div>



var viewModel = {
    inputColor: ko.observable() 
};

修改

由于您想要更改样式元素本身，请使用样式标记上的文本绑定。有一点要记住，整个样式将被更改，因此您必须在更新元素之前维护有效的css规则。

 <style data-bind="text:inputColor"></style>

您可能希望subscribe到inputColor observable，以便在填充样式元素之前将输入更改为有效的css。

This question可能是相关的。

Answer 4

您可以使用虚拟if绑定

<style type="text/css">
   <!-- ko if: someExpression -->
        .mydiv { background-color:#333333; }
   <!-- /ko -->
   <!-- ko if: !someExpression -->
        .mydiv { background-color:#000000; }
   <!-- /ko -->
</style>

用knockoutjs改变css

4 个答案:

修改