javascript - javascriptでオンザフライでスタイルコンポーネントを追加および削除する方法は?

Question

重複の可能性：
JavaScriptでスタイルを動的に追加/削除

要素の選択を無効および有効にするには、javascript 関数を記述する必要があります。サンプルコードを書きました：

<style type="text/css">
.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.selectable {
  -moz-user-select: text;
  -khtml-user-select: text;
  -webkit-user-select: text;
  user-select: text;
}
</style>
<script>
function makeUnselectable(node) {
  if (node.nodeType == 1) {
    node.unselectable = true;
  }
  var child = node.firstChild;
  while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
  }
}
function makeSelectable(node) {
  if (node.nodeType == 1) {
    node.unselectable = false;
  }
  var child = node.firstChild;
  while (child) {
    makeSelectable(child);
    child = child.nextSibling;
  }
}
</script>

しかし、このコードは正しくなく、機能しません。javascriptでオンザフライでスタイルコンポーネントを追加および削除する方法は? 現在の要素のすべてのスタイルとクラスはそのままにしておく必要があります。

Answer 1

これは正しいと思います：

  <style type="text/css">
    .unselectable {
      -moz-user-select: -moz-none;
      -khtml-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
  </style>
  <script>
  function hasClass(ele,cls) {
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
  }
  function addClass(ele,cls) {
    if (!this.hasClass(ele,cls)) ele.className += " "+cls;
  }
  function removeClass(ele,cls) {
    if (hasClass(ele,cls)) {
      var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
      ele.className=ele.className.replace(reg,' ');
    }
  }
  function makeUnselectable(node) {
    if (node.nodeType == 1) {
      addClass(node, "unselectable");
    }
    var child = node.firstChild;
    while (child) {
      makeUnselectable(child);
      child = child.nextSibling;
    }
  }
  function makeSelectable(node) {
    if (node.nodeType == 1) {
      removeClass(node, "unselectable");
    }
    var child = node.firstChild;
    while (child) {
      makeSelectable(child);
      child = child.nextSibling;
    }
  }
  </script>

ありがとう: rockycode.com/blog/addremove-classes-raw-javascript

Answer 2

Jquery を使用できます css メソッドを見てください: http://api.jquery.com/css/