Vendor Prefix css3 properties in javascript

Question

I'm trying add animation-duration css3 property respective of height and width of grid. I made it using this code div.style.animationDuration. It works good for me.

my concern is how to add vendor prefix css3 property for animation-duration in js like -ms-animation-duration

Latest browser version require no prefix except Safari with -webkit. I don't think MS ever prefixed this. — user663031
– user663031, Commented Mar 3, 2016 at 13:55

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Generally vendor prefixes in javascript for css are as follows:

moz for Mozilla Firefox
webkit for Google Chrome , Apple Safari, and other webkit-based browsers
ms for Microsoft Internet Explorer
o for Opera

Hence you can replace div.style.animationDuration with div.style.webkitAnimationDuration

To deal with this problem in general you can write a method

function setVendorCss(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

Read more here https://www.kirupa.com/html5/vendor_prefixes_javascript.htm

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 1, 2016 at 9:30

Avinash Agrawal

1,1481 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

Shouldn't it be webkitAnimationDuration with an upper-case "A"?

user6008370 · Accepted Answer · 2016-03-03 11:56:36Z

0

Instead of selecting the element like so:

element.style.color = 'red';
element.style.fontSize = '2em';

Try:

element.style.cssText = 'color: red; font-size: 2em';

style.cssText is useful for adding multiple styles at a time, even the trickier ones that require prefixes.

answered Mar 3, 2016 at 11:56

user6008370

Collectives™ on Stack Overflow

Vendor Prefix css3 properties in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related