How to add and remove style component on the fly by javascript?

Question

Possible Duplicate:
dynamically add/remove style in javascript

It's required to write javascript functions to disable and enable selection of the element. I wrote sample code:

<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>

But this code is incorrect and doesn't work. How to add and remove style component on the fly by javascript? All the current element's styles and the class should remain!

@raina77ow I think that is what the OP is actually attempting. — Michael Berkowski, Nov 05 '12 at 00:51
> Erm... if you're using classes, why not just add/remove a class then? - I have a huge page with a lot of styles and should only control selection on it. — Dmitry, Nov 05 '12 at 00:52
> rockycode.com/blog/addremove-classes-raw-javascript - Will it add a several classes to the element without replacing them? — Dmitry, Nov 05 '12 at 00:53
But of course, it will. ) Don't you see that it checks for existence of its argument in the element's `className`? — raina77ow, Nov 05 '12 at 00:55

score 0 · Accepted Answer · answered Nov 05 '12 at 01:02

I think this will be correct:

  <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>

Thanks to: rockycode.com/blog/addremove-classes-raw-javascript

Looks like you forgot the `hasClass` function and a link to Jake's article: http://rockycode.com/blog/addremove-classes-raw-javascript/ — jk., Nov 05 '12 at 01:05

gabrielem · Answer 2 · 2012-11-05T01:00:04.067

-1

you can use Jquery Take a look to the css method: http://api.jquery.com/css/

edited Nov 05 '12 at 01:00

answered Nov 05 '12 at 00:51

gabrielem

560
5
13

No, [you don't have to use jQuery](http://rockycode.com/blog/addremove-classes-raw-javascript/). – Dan Dascalescu Nov 05 '12 at 00:51
No you don't have to use jQuery. It can be done in pure JavaScript. – Michael Berkowski Nov 05 '12 at 00:52
1

yes right, I correct my answer to "you can use" jquery ^_^ – gabrielem Nov 05 '12 at 01:00
If you read the OP's code above, it attempts to toggle CSS _classes_ on and off. `jQuery.css()` does not handle that use case - it can only modify CSS properties individually. – Michael Berkowski Nov 05 '12 at 01:58

How to add and remove style component on the fly by javascript?

2 Answers2