淘汰賽js根據文本框值更改div寬度

我是新來擊倒js的。需要幫助。我想，當我將添加數字在文本框劃分應該調整大小的像素的大小。淘汰賽js根據文本框值更改div寬度

以下是代碼;

<html> 
     <head> 
      <style type="text/css"> 
       #myDiv { 
         border:solid 1px #f00; 
       } 
       #myOtherDiv { 
         border:solid 1px #00f; 
         width: 150px; 
       } 
      </style> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
      <script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script> 
      <script type="text/javascript"> 
       $(document).ready(function(){ 

        var viewModel = { 
          myWidth: ko.observable('250px'), 
          anotherDiv: ko.observable('KO is working') 
         }; 
         ko.applyBindings(viewModel); 
       }); 
      </script> 
     </head> 
      <body> 
        <div id="myDiv" data-bind="style: { width: myWidth }"> 
         Some Text 
        </div> 
        <div id="myOtherDiv"> 
          Some More Text 
        </div> 
        <div data-bind="text: anotherDiv"></div> 
        Enter size<input type = text /> 
      </body> 
    </html>

來源

2012-12-20 manojmore

你應該輸入字段綁定到myWidth屬性：

Enter size <input type = text data-bind="value: myWidth"/>

還鏈接到淘汰賽壞試試這個：http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.0.js

這裏是工作提琴：http://jsfiddle.net/wAYqY/

來源

2012-12-20 11:48:19

非常感謝你！我們還可以在數據綁定中同時使用「attr」和「style」嗎？如果是，將如何行，輸入大小 – manojmore

這是可能的。 –

謝謝！你是一個很好的幫助。我會試試看。 – manojmore

你必須使用此鏈接進行淘汰賽 - 2.2.0.js其作品

   <script src="http://knockoutjs.com/downloads/knockout-2.2.0.js"></script>

來源

2012-12-20 11:55:09

你在說什麼鏈接？ –

–

非常感謝你！我們還可以在數據綁定中同時使用「attr」和「style」嗎？如果是的話，那麼下面這行代碼如何，輸入大小 – manojmore

淘汰賽js根據文本框值更改div寬度

回答

相關問題