Почему стилизация TD в jquery делает разметку безумной? - PullRequest
5 голосов
/ 30 июня 2011

Я пытаюсь добавить простую рамку ко всем ячейкам таблицы в таблице.

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

Допустим, я стиль тдс, как это:

$('td').css('border', '1px solid #000');

это заканчивается как мой результат:

<td style=​"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:​ rgb(0, 0, 0)​;​ border-right-color:​ rgb(0, 0, 0)​;​ border-bottom-color:​ rgb(0, 0, 0)​;​ border-left-color:​ rgb(0, 0, 0)​;​ ">​…​/td>

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

1 Ответ

13 голосов
/ 30 июня 2011

Так браузеры обрабатывают сокращенные свойства 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', ...) вы, вероятно, переопределяете все встроенных стилей элементов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...