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

Improve this question
4
  • 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) Commented Sep 2, 2017 at 11:47
  • @Nit Property names seem to be right. I just checked on IE, and it does support msUserSelect. Commented Sep 2, 2017 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"); Commented Sep 2, 2017 at 11:57
  • Yes, uppercasing the properties solved my problem, thanks guys! Commented Sep 2, 2017 at 12:20
Related questions
12225
How can I remove a specific item from an array in JavaScript?
7610
How do JavaScript closures work?
7580
How do I remove a property from a JavaScript object?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.