clickでCSS変更

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>clickでCSS変更</title>
  6. <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
  7. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. <script type="text/javascript">
  9.   $(document).ready(function () {
  10.     function viewModel() {
  11.       var self = this;
  12.       
  13.       self.changeColor = ko.observable(0);
  14.       
  15.       self.ClickChangeColorA = function() {
  16.         self.changeColor(1);
  17.       };
  18.       
  19.       self.ClickChangeColorB = function() {
  20.         self.changeColor(-1);
  21.       };
  22.     }
  23.     ko.applyBindings(new viewModel());
  24.   });
  25. </script>
  26. <style type="text/css">
  27. .test{
  28.   color:red;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <h1>clickでCSS変更</h1>
  34. <div data-bind="css: {'test': changeColor() < 0}">
  35.   てすと
  36.   <button data-bind="click: ClickChangeColorA">無指定</button>
  37.   <button data-bind="click: ClickChangeColorB">赤くする</button>
  38. </div>
  39. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  40. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  41. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  42. </div>
  43. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  44. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  45. </div>
  46. </body>
  47. </html>