Получить / установить значения свойств CSS через Javascript: вопросы

Некоторые вещи мне непонятны:

var myDiv = document.getElementById("myDiv");
var computedStyle = window.getComputedStyle(myDiv);

1) Невозможно напрямую получить глобальный цвет границы элемента div, если имеется только один цвет, одинаковый для каждой стороны:

computedStyle.getPropertyValue("border-color");

Вместо того, чтобы делать:

computedStyle.getPropertyValue("border-left-color");

ИЛИ ЖЕ

computedStyle.getPropertyValue("border-right-color");

ИЛИ ЖЕ

computedStyle.getPropertyValue("border-top-color");

...

2) Имея свойства стиля в файле CSS, они доступны только через метод getComputedStyle, а не через свойство стиля, такое как свойства стиля, определенные внутри строки, через атрибут стиля в div, верно?

myDiv.style.getPropertyValue("border-left-color");

Это не будет работать.

3) Если мы хотим установить свойство стиля, мы должны использовать атрибут стиля элемента, не возможно ли использовать вычисляемый объект стиля?

computedStyle.setProperty("border-color", "yellowgreen", null);

Я думал, что использование атрибута стиля - это «старый способ сделать», например, использование атрибута встроенного стиля или использование object.style.property = & quot; value & quot; установить свойство стиля в Javascript.

Благодарю.

jsFiddle:http://jsfiddle.net/pgtFR/12/

Ответы на вопрос(3)

t it possible to directly get global border color of a div if there is only one color, the same for each side

Да и нетспекуляция описывает два метода:

getPropertyCSSValue() returns a CSSValue of a single CSS Property. It does not work with shorthand properties. getPropertyValue() returns a DOMString, and works also for shorthand properties. But you need to be careful when there are different borders, the string will represent all of them.

When having style properties in a CSS file, they are only accessible through the getComputedStyle method

Нет, они также доступны черезdocument.styleSheets (спекуляция), и может быть изменен сStyleSheet interface.

...and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

Да..style Свойство представляет только объявление стиля в атрибуте style (встроенные стили).

If we want to set a style property, we have to use the style attribute of the element

Я предполагаю, что вы имеете в виду свойство CSS. Вы также можете влиять на вычисляемый стиль, устанавливая классы для вашего элемента (или всего, что применяет другие стили через таблицу стилей). Или вы можете создавать таблицы стилей динамически, и они будут применены к документу. Вы также можете установитьstyle атрибута элемента, но обычно вы будете использоватьCSSStyleDeclaration interface выставлено.style имущество.

is it not possible using the computed style object?

Да.спекуляция говорит, что вернул & quot;CSSStyleDeclaration is read-only and contains only absolute values& Quot ;.

1) Isn't it possible to directly get global border color of a div if there is only one color, the same for each side:

Да, можно получить вычисляемый стиль, просто используя сокращенное имя свойства. Я попробовал пример, которым вы поделилисьjsfiddle и computedStyle.getPropertyValue (& quot; border-color & quot;) действительно возвращает (265,65,0), что является кодом rgb для оранжевого цвета, как и ожидалось.

2) When having style properties in a CSS file, they are only accessible through the getComputedStyle method and not via the style property like style properties defined inline, via a style attribute in the div, I'm right?

Да. getComputedStyle возвращает окончательное вычисленное значение стиля браузером после применения внешних, внутренних и встроенных правил стиля. Атрибут .style относится только к встроенному стилю элемента.

3) If we want to set a style property, we have to use the style attribute of the element, is it not possible using the computed style object?

Согласно этомудокументgetComputedStyle возвращает объект CSSStyleDeclaration, который доступен только для чтения.

I thought using the style attribute was the "old way to do", like using the inline style attribute or using object.style.property = "value" to set a style property in Javascript.

Свойство style в JS сильно отличается от встроенных стилей в HTML. Встроенные стили в HTML плохие (IMHO), потому что:

They are rough on your designer; if you change blue to lightBlue, and you had a class "blue", you have one place to change (your stylesheet). If instead you had a document full of style='color:blue' ... well now you get to have some fun with using the Linux sed command to do a massive find/replace ;-)

Classes work better performance-wise. For one thing, page load-wise, style='color:blue' is six more characters than class='blue'. When you start having multiple classes/styles, and lots of elements with all those, it (kind of) adds up. Similarly, once you enter JS land, changing classes on things is slightly faster than changing styles directly. PPK did a study on this awhile back on his quirksmode.org blog.

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

Итак, в конце дня, классы и таблицы стилей предпочтительнее в первую очередь по причине № 1; Попытка сохранить непротиворечивый внешний вид или даже не беспорядочный, но непоследовательный вид практически невозможна при использовании встроенных стилей.Maybe если вы выполняете огромное количество серверной обработки для генерации этих встроенных стилей ... но я бы не рекомендовал это.

Однако ничто из этого не исключает использования свойства JS «стиль» хоть. Фактически, если вы посмотрите на источник для jQuery, вы увидите, что он заполнен использованиями.style, И jQuery - не самая популярная библиотека в Интернете; это весь (первоначально) код Джона Резига, что означает, что он настолько хорош, качественен, как и код JS.

Так что да, используйте стиль. Не чувствую вины за это :-)

Теперь, что касается остальных ваших вопросов, краткий ответ заключается в том, что getComputedStyle - это, по сути, JS-ссылка на таблицы стилей, и поэтому вы не можете изменять их (нет 3), у них нет встроенных стилей (да 2) и я, честно говоря, не уверен, что разные браузеры делают в 1) случае; Я не ожидал ничего последовательного, но вам может повезти.

ВАШ ОТВЕТ НА ВОПРОС