CSS中的`var`在IE中不起作用

Question

I have two variables for horizontal and vertical alignment say xPos and yPos and it will assign the value as 0 for it in css like this:

var xPos="left",
    yPos="bottom";

$(".applyCss").css({
    "width":"200px",
    "height":"200px",
    "position":"absolute",
    "background-color":"#E0E0E0",
    [xPos]:0,
    [yPos]:0
});   

This logic is working fine except in IE. It shows

Expected identifier, string or number

I referred many questions in StackOverflow, and i got the answer as "Internet Explorer have troubles with trailing commas in objects and arrays". But i didn't get any solution for this problem

Here is the jsFiddle

(Note: I got a workaround for this problem, but i want to know a solution for this method)

Answer 1

That object literal bracket syntax is new to ES6 (also known as ES2015). It'll work in modern browsers like Firefox, Chrome, and Edge, but IE barely achieves ES5 compliance.

Either use Babel for browser compatibility, or use the old trusty syntax:

var xPos="left",
    yPos="bottom";

var myStyles = {
    "width":"200px",
    "height":"200px",
    "position":"absolute",
    "background-color":"#E0E0E0",
};
myStyles[xPos] = 0;
myStyles[yPos] = 0;
$(".applyCss").css(myStyles);