Вопрос по javascript, html, css, dom – Получить / установить значения свойств CSS через Javascript: вопросы

4

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

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/

Я ищу нативный способ, чистый JS, чтобы сделать это. Благодарю. baptx
Я не знаю, это зависит от вашего определения "магии"; лично я думаю, что jQuery чертовски волшебен :-) Но да, я ничего не знаю о том, что jQuery делает, чтобы конкретно решить этот пост. machineghost
@Jashwant: jQuery не творит волшебство, и особенно не тот, который просили здесь ... Bergi
Тебе необходимоmagic. Jashwant

Ваш Ответ

3   ответа
5

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 ;.

Вы уверены, чтоgetPropertyValue() работает для стенографии свойства? Смотрите этот вопросstackoverflow.com/q/40830568/1325646
@Pomber Да, ноCSSStyleDeclaration не обязательно содержит сокращенные свойства. Похоже на тоgetComputedStyle например, не вычисляет сокращения, но если вы извлекаете.style или что-то, что вы должны иметь к ним доступ.
Спасибо за эти отличные ответы. Да, я имел в виду свойство CSS, мы всегда должны использовать атрибут .style, чтобы установить значение свойства? baptx
1

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) случае; Я не ожидал ничего последовательного, но вам может повезти.

Спасибо! Поэтому я не должен колебаться, используя атрибут style, противоречащий встроенному стилю :) (и у меня нет выбора, если я правильно понимаю). Но вы можете согласиться с тем, что лучше использовать myDiv.style.setProperty ("border-color", "blue", null,); который кажется стандартом DOM вопреки myDiv.style.borderColor = & quot; синий & quot ;;, верно? baptx
Честно говоря, я не знал (и что касается проблемы с поиском в Google в течение примерно 15 минут, до сих пор не знаю) о каких-либо преимуществах использования style.setProperty перед style =. На самом деле, наоборот, style = универсален, тогда как setProperty, кажется, работает только на IE9 + (см.help.dottoro.com/ljdpsdnb.php). Поэтому я думаю, стиль, который работает в любом браузере & gt; стиль, который терпит неудачу в IE7 и IE8 (не говоря уже о тех, кто страдает IE6s).
5

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, который доступен только для чтения.

Для информации, можно получить доступ к некоторым свойствам CSS, какwidth а такжеheight через element.style, даже если они были определены в таблице стилей вместо встроенных:stackoverflow.com/questions/34378543/… baptx
Спасибо, очень полезный ответ! Вы правы, computedStyle.getPropertyValue ("border-color") работает, но не в Firefox, и возвращает rgb (255, 165, 0), а не (265,65,0). Я заметил, что в Chrome myDiv.style.setProperty («border-color», «yellowgreen», null); with alert (myDiv.style.getPropertyValue (& quot; border-left-color & quot;)); возвращает «rgb (154, 205, 50)» а не «желто-зеленый»; Я думаю, что это правильный / стандартный способ отображения. Я много раз видел, что Chrome не уважает стандарты, как это должно быть, поэтому, возможно, Firefox прав. baptx

Похожие вопросы