Допустимо ли изменение стилей CSS с помощью document.getElementById (o) .style [p] = v '?

Question

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

Одним из часто используемых действий является изменение стилей объекта.

Обычно мы делаем это через:

document.getElementById('object').style.property='value';

Я только что протестировал в консоли chromes следующее, и это сработало:

function objStyle(o,p,v){
    document.getElementById(o).style[p]=v;
}

objStyle('object','property','value');

Это правильный способ ведения дел?

Какие-нибудь подводные камни, о которых можно подумать, используя этот способ ведения дел? Кроссбраузерная совместимость?

Answer 1

Да, это совершенно верно.Свойство, к которому вы получаете доступ по .name, также может быть доступно по ['name'].

, которое работает для любого свойства любого объекта, например:

window['alert']('Hello world.');

document['getElementById']('object')['style']['color'] = '#fff';

Answer 2

Ваш код в порядке.

Однако я хотел бы рассмотреть одну вещь: хотите ли вы продолжать вызывать document.getElementById() (внутри функции), если возникает ситуация, когда вам нужно выполнить несколько изменений одного и того же элемента. То, что я собираюсь предложить, это излишнее, чтобы показать вам больше возможностей, но учтите, что вы можете передать Id своей функции, или передать ссылку на элемент напрямую, или иметь функцию, которая принимает строку или элемент справка и вычисляется по типу параметра:

function objStyleById(oId,p,v){
   document.getElementById(oId).style[p]=v;
}

function objStyle(o,p,v) {
   o.style[p] = v;
}

function objStyleAuto(o,p,v) {
   if (typeof o === "string")
      o = document.getElementById("o");
   // else not a string so assume o is element reference
   o.style[p] = v;
}

objStyleById('object','property','value');

var myEl = document.getElementById("someElement");
objStyle(myEl,"prop","val");
objStyle(myEl,"prop2","val");
// some other non-style operation on myEl, e.g.,
myEl.className = "something";
myEl.innerHTML = "something";
objStyle(myEl.parentNode,"prop","value");

objStyleAuto('object','property','value');
objStyleAuto(myEl,'property','value');