$(selector).click(function(){
//instead of:
this.getAttribute('style');
//do i use:
$(this).prop('style');
//or:
$(this).attr('style');})
Я работал над этим и разместил свое решение ниже «скрипки». Пожалуйста, проверьте это... См. эту скрипту: http://jsfiddle.net/maniator/JpUF2/
Надеюсь, это будет полезно...
Здесь четкий ответ объяснил кратко
Я не могу найти полный список в Интернете. Каждый, кто дает какой-либо список, просто копирует частичный список, приведенный в сообщении блога jQuery 1.6. Что касается № 3, Starx как бы обратился к этому в своем комментарии к ответу здесь. http://timmywillison.com/ содержит более подробную информацию и достойное обсуждение. MDN и спецификации W3C также упоминают, что существуют различные интерфейсы атрибутов, в которых они могут быть установлены так, как если бы они были свойствами ( https://developer.mozilla.org/en/DOM/element ), хотя MDN на самом деле не перечисляет, какие именно. MDN упоминает, что использование интерфейсов свойств в качестве сеттеров более хрупкое, чем использование getAttribute:
«Хотя эти интерфейсы, как правило, являются общими для большинства элементов HTML и XML, существуют более специализированные интерфейсы для конкретных объектов, перечисленных в спецификации DOM HTML. Обратите внимание, однако, что эти интерфейсы HTML «только для [HTML 4.01] и [XHTML 1.0] документы и не гарантируется работа с какой-либо будущей версией XHTML». В черновике HTML 5 действительно говорится, что он нацелен на обратную совместимость с этими интерфейсами HTML, но о них говорится, что «некоторые функции, которые ранее считались устаревшими, плохо поддерживались, редко использовались или рассматривались ненужные были удалены.» Можно избежать потенциального конфликта, полностью перейдя на методы атрибутов DOM XML, такие как getAttribute().»
Однако на данный момент кажется безопасным предположить, что любая страница документа HTML5, отображаемая в Firefox и Chrome, уже находится в среде, где «устаревшие, плохо поддерживаемые» и т. д. интерфейсы уже удалены.
Таким образом, я протестировал каждый атрибут, а также неатрибутные свойства, упомянутые в блогах jQuery, для каждого типа HTML-элемента, используя логические, строковые и целые значения.
Используя 1.7.2 и 1.8pre, независимо от того, вызываете ли вы .prop() или attr(), внутри jQuery всегда будет фактически использоваться .prop для:
async, autofocus, autoplay, checked, controls, defer, disabled, hidden, loop,
multiple, open, readonly, required, scoped, selected
Для HTML-элементов (без учета окна, документа и т. д.) jQuery не будет устанавливать ни один из следующих атрибутов, если вы не используете .attr():
accept-charset, accesskey, bgcolor, buffered, codebase, contextmenu, datetime,
default, dirname, dropzone, form, http-equiv, icon, ismap, itemprop, kind,
language, list, location, manifest, nodeName, nodeType, novalidate, pubdate,
radiogroup, seamless, selectedIndex, sizes, srclang, style, tagName
И, наконец, jQuery установит следующий список атрибутов с помощью .prop() или .attr(). В первом списке выше jQuery всегда использует .prop(), независимо от того, используете ли вы .attr() или .prop(). Для атрибутов в этом списке jQuery использует то, что вы используете. Если вы используете .prop(), jQuery использует .prop() и наоборот. В любом случае результат одинаков. Таким образом, игнорируя любые возможные семантические соображения, просто в отношении того, что prop() примерно в 2,5 раза быстрее, чем .attr(), сообщение в блоге jQuery 1.6.1 предлагает использовать .attr(), но вместо этого можно использовать .prop() , со значительным увеличением производительности:
accept, action, align, alt, autocomplete, border, challenge, charset, cite,
class, code, color, cols, colspan, contenteditable, coords, data, defaultValue,
dir, draggable, enctype, for, headers, height, hidden, high, href, hreflang,
id, keytype, label, lang, low, max, maxlength, media, method, min, name,
optimum, pattern, ping, placeholder, poster, preload, readonly, rel, required,
reversed, rows, rowspan, sandbox, scope, shape, size, span, spellcheck, src,
srcdoc, start, step, summary, tabindex, target, title, type, usemap, value,
width, wrap
Подробнее об этом ответе см. Нажмите здесь
Надеюсь это поможет....
$.prop() => можно использовать для получения свойств элемента DOM, таких как tagName, но
$.attr() => используется для получения атрибутов элементов DOM, таких как стиль.
Есть разница...
Если это ваш HTML:
<div id='id' style="color: red;background: orange;">test</div>
И ваш Javascript:
$("#id").click(function() {
var getAtt = this.getAttribute('style');
var thisProp = $(this).prop('style');
var thisAttr = $(this).attr('style');
});
Значение переменной getAtt равно color: red;background: orange;.
Значением thisProp является объект объявления стиля CSSStyleDeclaration.
Значение thisAttr равно color: red;background: orange;.
