1

I create a div element and set its style properties in JavaScript:

var popupDiv = document.createElement("div");
popupDiv.style.background = "#fff";
popupDiv.style.border = "1px solid #e8e8e8";
popupDiv.style.padding = "20px";
popupDiv.style.position = "fixed";
...

But I also want to add:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none; 
user-select: none;

So I tried:

popupDiv.style.webkitUserSelect = "none";
popupDiv.style.mozUserSelect = "none";  
popupDiv.style.msUserSelect = "none";
popupDiv.style.userSelect= "none";

But only the "user-select: none;" property gets set correctly...so my question is...how do I add these "unsupported" css properties via JS?

(Setting them directly in css/inline is not an option.)

Rok Sprogar
  • 2,261
  • 2
  • 17
  • 27
  • 2
    why do you want to add it if they're not supported? Ah or I misread, your problem is that the first letter of moz and webkit browser-prefix are UpperCase (`WebkitUserSelect`) – Kaiido Sep 02 '17 at 11:47
  • @Nit Property names seem to be right. I just checked on IE, and it does support `msUserSelect`. – Nisarg Shah Sep 02 '17 at 11:50
  • You may possibly pre-define a class like `.noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }` and add it to the `classList` property dynamically like `element.classList.add("noselect");` – Redu Sep 02 '17 at 11:57
  • Yes, uppercasing the properties solved my problem, thanks guys! – Rok Sprogar Sep 02 '17 at 12:20

0 Answers0