`var` in CSS funktioniert nicht in IE

Question

Ich habe zwei Variablen für die horizontale und vertikale Ausrichtung sagen xPos und yPos und es wird der Wert als 0 für sie in CSS wie folgt vergeben:

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

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

Diese Logik ist funktioniert gut außer in IE. Es zeigt

Expected identifier, string or number 

ich viele Fragen in Stackoverflow genannt, und ich habe die Antwort als „Internet Explorer Probleme haben mit Kommas in Objekte und Arrays Hinter“. Aber ich keine Lösung für dieses Problem bekommen haben

Hier ist die jsFiddle

(Anmerkung: Ich habe eine Abhilfe für dieses Problem, aber ich will eine Lösung für diese Methode kennen)

Answer 1

That Object Literal Bracket Syntax ist neu in ES6 (auch bekannt als ES2015). Es funktioniert in modernen Browsern wie Firefox, Chrome und Edge, aber IE erreicht kaum ES5-Kompatibilität.

Entweder Babel für Browser-Kompatibilität verwenden, oder die alte treue 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);