Каков правильный способ доступа к свойствам стиля CSS элемента из JavaScript?

Question

Следующий код JavaScript прекрасно работает в WebKit на основе браузеров, но он не работает в Firefox:

canvas.style['left'] = "50%"; 
canvas.style['margin-left'] = "-" + (width/2) + "px"; 

Осматривая элемент в Firefox, я могу видеть, что свойство left успешно установлено выше код , но по какой-то причине элемент не имеет свойства margin-left.

Кажется, я должен что-то делать неправильно, что неудивительно, потому что я не смог выяснить, какой правильный способ доступа (считывания или установки) свойств стиля CSS из JavaScript. Я только что нашел несколько примеров, используя эту нотацию, и попытался следовать им, имея эти смешанные результаты.

Каков правильный/стандартизованный способ доступа к свойствам стиля CSS элемента из JavaScript?

Answer 1

После многократного вытягивания волос я обнаружил следующие основные факты, которые, несомненно, не имеют проблем с большинством пользователей JavaScript, но я думаю, что мое замешательство не редкость среди других, очень новых для JavaScript.

• Все объекты в JavaScript являются ассоциативными массивами.

Свойства объекта можно получить в любом из двух способов:

var o = new Object(); 
o.prop = "A string"; 
o['prop']; // => "A string" 

Хотя можно использовать объект как «нормальный» ассоциативный массив и использование ключей с произвольными строками:

o.['another-prop'] = 4 // Perfectly valid 

в этом, вы бы создать свойство, которое не может быть доступно через точечную нотацию:

o.another-prop // Parsed as `o.another` minus `prop` 

Это предположительно причина:

• DOM стиль СВОЙСТВА использовать верблюжьего при доступе из JavaScript.

Я использовал имена дефисных свойств, используемые в CSS. Они работали во всех браузерах на базе WebKit, которые я тестировал, но, похоже, это только потому, что WebKit прощает.

---

Так, насколько я могу судить, правильный способ доступа к свойствам стилей CSS от JavaScript, чтобы преобразовать имя свойства в ГорбатыйРегистр, а затем использовать либо точечную нотацию или квадратные скобки ассоциативный обозначения массива. Линия, которая не работает в Firefox становится

canvas.style['marginLeft'] = "-" + (width/2) + "px"; 

или

canvas.style.marginLeft = "-" + (width/2) + "px"; 

Это работает для меня во всех браузерах я проверил, но если что-то я сказал, не является правильным или последовательным со стандартами, я бы с удовольствием это услышал.

Answer 2

Удалить тир и следующие из них слово с заглавной буквой, маржи налево на MarginLeft и т.д.

obj.style.marginLeft = '10px';