Так браузеры обрабатывают сокращенные свойства CSS;некоторые браузеры могут реализовывать удобочитаемое представление иначе, чем внутреннее представление, но в действительности
border: 1px solid #000
является сокращением для
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000;
border-left-color: #000;
с числом возможных представлений #000
.
Я тестировал в Chrome и Safari (оба браузера WebKit), и установка этого свойства непосредственно в DOM (element.style.border = '1px solid #000'
) имела именно такой результат.Это поведение WebKit , , а не jQuery .
Кроме того, это отличный пример, чтобы подчеркнуть тот факт, что DOM отличается от разметки, и долженотноситься по-разному.Даже в сценарии designMode
/ contentEditable
(который является единственным действительно разумным использованием прямого стиля вместо классов CSS), просто взятие представления innerHTML
элемента - целый набор потенциальных возможностей.риски.Вы увидите другие проявления этого в более старых версиях IE, чьи представления «разметки» DOM абсолютно безумны.Нередко встречаются такие вещи, как:
<div class="foo">...</div>
становятся:
<DIV CLASS="foo" _JQUERY12903579="qwertyuiop" HASLAYOUT=TRUE etc etc etc>...</DIV>
И так же, как DOM и разметка не одно и то же, важно понимать, что attribute
иproperty
это не одно и то же.В конечном счете, метод jQuery.css
реализуется путем присвоения значений свойствам element.style
(например, collection.css({ border: '1px solid #000' })
примерно эквивалентно collection.each(function() { this.style.border = '1px solid #000' })
; в то время как collection.attr('style', 'border: 1px solid #000')
эквивалентно collection.each(function() { this.setAttribute('style', 'border: 1px solid #000'); })
. Устанавливая атрибут, а не свойства,то, что вы делаете, фактически похоже на ретроактивное редактирование разметки HTML. Это может привести к непредсказуемым результатам, если у вас также есть свойства, которые задают этот конфликт.
Также обратите внимание, что при использовании attr('style', ...)
вы, вероятно, переопределяете все встроенных стилей элементов.