用knockoutjs更改css

11 浏览
0 Comments

用knockoutjs更改css

假设我有一个背景色为#333333的div，并且我有一个输入框，用户可以在其中输入自己的十六进制值，例如：#000000，然后我希望div的背景色即时更改为#000000....例如：\nHTML：\n



\nCSS：\n






\n然后，当用户通过input type=\"text\"字段更改值时，CSS应该在style=\"text/css\"块中更改。\n我该如何实现这种绑定？我不能在我的style块中使用






需要注意的是，在更新style标签之前，需要确保inputColor的值是有效的CSS规则。


如果想要在填充style标签之前将输入转换为有效的CSS，可以使用subscribe方法来订阅inputColor可观察变量的变化。


以上就是使用Knockout.js动态改变CSS样式的方法。


参考链接：


- Knockout.js的style绑定文档：http://knockoutjs.com/documentation/style-binding.html


- Knockout.js的value绑定文档：http://knockoutjs.com/documentation/value-binding.html


- Knockout.js的可观察变量文档：http://knockoutjs.com/documentation/observables.html


- 相关问题的链接：https://stackoverflow.com/questions/13357515

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的出现原因是希望通过用户输入来动态改变CSS样式，但是目前的实现方式是将样式直接写入HTML代码中。


为了解决这个问题，可以通过Knockout.js来实现动态改变CSS样式。首先，在HTML代码中使用Knockout.js的数据绑定来绑定用户输入的值到一个observable变量。然后，创建一个computed函数来监听用户输入的变化。每当用户输入发生变化时，computed函数会动态地将样式块追加到head标签中。这样，每次用户输入发生变化时，都会覆盖之前的样式，从而实现动态改变CSS样式的效果。


以下是具体的实现代码：









var MyModel = function(data){
   var self = this;
   self.userInput = ko.observable('#333333');
   self.computedCss = ko.computed(function(){
      // 每次用户输入发生变化时，动态追加样式块到head标签中
      var appendal = "";
      $('head').append(appendal);
   });
}
myModel = new MyModel({});
ko.applyBindings(myModel);





通过以上代码，我们实现了通过Knockout.js动态改变CSS样式的功能。每当用户输入发生变化时，computed函数会动态地将新的样式块追加到head标签中，从而覆盖之前的样式，达到动态改变CSS样式的效果。

									

				

									

			

			
0

		

	



											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
问题的出现原因：


问题是因为需要通过Knockout.js动态改变CSS样式，但是在示例代码中只是使用了style绑定，而没有提供具体的解决方法。


解决方法：


为了解决这个问题，可以使用层叠样式表（Cascading Style Sheet）来更新样式。首先，在CSS文件中定义一个具有初始颜色的类，然后创建一个带有文本绑定的样式标签，并将其填充为新的颜色。确保将CSS文件放在下面的代码之前。


在JavaScript中，创建一个ViewModel对象，其中包含一个observable的customColor属性和一个myObservableStyle函数。myObservableStyle函数接收observable属性作为参数，并返回一个包含新颜色的CSS样式字符串。


在HTML中，绑定customColor属性到输入框的值，并将myObservableStyle函数绑定到样式标签的文本属性。


最后，通过调用ko.applyBindings方法将ViewModel对象应用到页面上的元素上。


以下是示例代码中的解决方法：




    

        
    

    







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





通过以上方法，可以动态改变CSS样式，达到预期的效果。


参考链接：


[http://jsfiddle.net/k97ZZ/1/](http://jsfiddle.net/k97ZZ/1/)

									

				

									

			

			
0