.prop() против.attr()

Так что в jQuery 1.6 появилась новая функция prop(),

$(selector).click(function(){
    //instead of:
    this.getAttribute('style');
    //do i use:
    $(this).prop('style');
    //or:
    $(this).attr('style');
})

или в этом случае они делают то же самое?

И если мне придется перейти на использование prop() все старое attr() звонки прервутся, если я переключусь на 1.6?

ОБНОВИТЬ

selector = '#id'

$(selector).click(function() {
    //instead of:
    var getAtt = this.getAttribute('style');
    //do i use:
    var thisProp = $(this).prop('style');
    //or:
    var thisAttr = $(this).attr('style');

    console.log(getAtt, thisProp, thisAttr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<div id='id' style="color: red;background: orange;">test</div>

(см. также эту скрипку: http://jsfiddle.net/maniator/JpUF2/)

Консоль регистрирует getAttribute в виде строки, а attr как строка, но prop как CSSStyleDeclaration, Зачем? И как это повлияет на мое кодирование в будущем?

Источник

18 ответов

Решение

Обновление 1 ноября 2012

Мой оригинальный ответ относится конкретно к jQuery 1.6. Мой совет остался прежним, но jQuery 1.6.1 немного изменил ситуацию: перед лицом предсказанной кучи сломанных веб-сайтов команда jQuery вернулась attr() к чему-то близкому (но не совсем такому) к его старому поведению для логических атрибутов. Джон Ресиг также написал об этом в блоге. Я вижу трудности, с которыми они столкнулись, но все еще не согласен с его рекомендацией предпочесть attr(),

Оригинальный ответ

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

Я подведу итоги по основным вопросам:

  • Вы обычно хотите prop() скорее, чем attr(),
  • В большинстве случаев prop() делает то, что attr() Привык делать. Замена звонков на attr() с prop() в вашем коде вообще будет работать.
  • Свойства, как правило, проще, чем атрибуты. Значением атрибута может быть только строка, тогда как свойство может быть любого типа. Например, checked свойство является логическим, style свойство является объектом с индивидуальными свойствами для каждого стиля, size свойство это число.
  • Если существует свойство и атрибут с одним и тем же именем, обычно обновление одного обновляет другое, но это не относится к определенным атрибутам входных данных, таким как value а также checked: для этих атрибутов свойство всегда представляет текущее состояние, в то время как атрибут (кроме старых версий IE) соответствует значению по умолчанию / проверяемости ввода (отражено в defaultValue / defaultChecked имущество).
  • Это изменение удаляет некоторый слой волшебства jQuery, застрявший перед атрибутами и свойствами, а это означает, что разработчикам jQuery придется немного узнать о разнице между свойствами и атрибутами. Это хорошая вещь.

Если вы являетесь разработчиком jQuery и все это дело смущает свойства и атрибуты, вам нужно сделать шаг назад и немного узнать об этом, поскольку jQuery больше не пытается так сильно оградить вас от этого. Для авторитетного, но несколько сухого слова по теме, есть спецификации: DOM4, HTML DOM, DOM Level 2, DOM Level 3. Документация Mozilla по DOM действительна для большинства современных браузеров и ее легче читать, чем спецификации, поэтому вы можете найти их справку по DOM полезной. Там есть раздел о свойствах элемента.

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

<input id="cb" type="checkbox" checked>
<input id="cb" type="checkbox" checked="checked">

Итак, как вы узнаете, если флажок установлен с помощью jQuery? Посмотрите на переполнение стека, и вы обычно найдете следующие предложения:

  • if ( $("#cb").attr("checked") === true ) {...}
  • if ( $("#cb").attr("checked") == "checked" ) {...}
  • if ( $("#cb").is(":checked") ) {...}

На самом деле это самая простая вещь в мире, checked Логическое свойство, которое существует и работает безупречно во всех основных скриптовых браузерах с 1995 года:

if (document.getElementById("cb").checked) {...}

Свойство также делает проверку или снятие флажка тривиальным:

document.getElementById("cb").checked = false

В jQuery 1.6 это однозначно становится

$("#cb").prop("checked", false)

Идея использования checked Атрибут для сценариев флажок бесполезен и не нужен. Собственность - это то, что вам нужно.

  • Непонятно, как правильно установить или снять флажок с помощью checked атрибут
  • Значение атрибута отражает значение по умолчанию, а не текущее видимое состояние (за исключением некоторых более старых версий IE, что еще больше усложняет задачу). Атрибут ничего не говорит о том, установлен ли флажок на странице. Смотрите http://jsfiddle.net/VktA6/49/.
Источник

Я думаю, что Тим сказал это хорошо, но давайте сделаем шаг назад:

Элемент DOM - это объект, вещь в памяти. Как и большинство объектов в ООП, у него есть свойства. Он также отдельно имеет карту атрибутов, определенных для элемента (обычно исходящих от разметки, которую браузер считал для создания элемента). Некоторые свойства элемента получают свои начальные значения из атрибутов с такими же или похожими именами (value получает начальное значение из атрибута value; href получает начальное значение из атрибута "href", но это не совсем то же самое значение; className из атрибута "класс"). Другие свойства получают свои начальные значения другими способами: например, parentNode свойство получает свое значение в зависимости от того, что является его родительским элементом; элемент всегда имеет style свойство, имеет ли он атрибут "стиль" или нет.

Давайте рассмотрим этот якорь на странице в http://example.com/testing.html:

<a href='foo.html' class='test one' name='fooAnchor' id='fooAnchor'>Hi</a>

Некоторое бесплатное искусство ASCII (и оставляющее много вещей):

+ ------------------------------------------- +
|             HTMLAnchorElement             |
+ ------------------------------------------- +
| href:       "http://example.com/foo.html" |
| имя:       "fooAnchor"                   |
| id:         "fooAnchor"                   |
| className:  "проверить один" |
| атрибуты:                               |
|    href:  "foo.html"                      |
| имя: "fooAnchor" |
| id: "fooAnchor" |
| класс: "проверить один"                      |
+ ------------------------------------------- +

Обратите внимание, что свойства и атрибуты различны.

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

Когда я говорю о свойствах как о свойствах объекта, я не говорю абстрактно. Вот некоторый код не-JQuery:

var link = document.getElementById('fooAnchor');
alert(link.href);                 // alerts "http://example.com/foo.html"
alert(link.getAttribute("href")); // alerts "foo.html"

(Эти значения соответствуют большинству браузеров; есть некоторые различия.)

link Объект - это реальная вещь, и вы можете видеть, что есть реальное различие между доступом к свойству и доступом к атрибуту.

Как сказал Тим, в подавляющем большинстве случаев мы хотим работать со свойствами. Частично это потому, что их значения (даже их имена) имеют тенденцию быть более согласованными в разных браузерах. В основном мы хотим работать с атрибутами только в том случае, если с ним нет связанных свойств (пользовательских атрибутов) или когда мы знаем, что для этого конкретного атрибута атрибут и свойство не равны 1:1 (как в случае с href и "href" выше).

Стандартные свойства изложены в различных спецификациях DOM:

Эти спецификации имеют отличные индексы, и я рекомендую держать ссылки на них под рукой; Я использую их все время.

Пользовательские атрибуты будут включать, например, любые data-xyz атрибуты, которые вы можете добавить к элементам для предоставления метаданных в свой код (теперь это действительно с HTML5, если вы придерживаетесь data- префикс). (Последние версии jQuery дают вам доступ к data-xyz элементы через data функция, но эта функция не просто средство доступа к data-xyz атрибуты [это делает и больше, и меньше, чем это]; если вам действительно не нужны его функции, я бы использовал attr функция для взаимодействия с data-xyz атрибутов.)

attr Функция имела обыкновение иметь некоторую запутанную логику для получения того, что они думали, что вы хотели, вместо того, чтобы буквально получать атрибут. Это смешало понятия. Переход к prop а также attr должен был их деконфлировать. Вкратце в v1.6.0 jQuery зашел слишком далеко в этом отношении, но функциональность была быстро добавлена ​​обратно attr чтобы справиться с общими ситуациями, когда люди используют attr когда технически они должны использовать prop,

Источник

Это изменение было долгое время для jQuery. В течение многих лет они довольствовались функцией с именем attr() который в основном извлекал свойства DOM, а не результат, который вы ожидаете от имени. Сегрегация attr() а также prop() должно помочь устранить некоторую путаницу между атрибутами HTML и свойствами DOM. $.fn.prop() захватывает указанное свойство DOM, в то время как $.fn.attr() захватывает указанный атрибут HTML.

Чтобы полностью понять, как они работают, вот расширенное объяснение различия между атрибутами HTML и свойствами DOM:

HTML атрибуты

Синтаксис:

<body onload="foo()">

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

Визуализация: HTML атрибуты Атрибут класса показан здесь на теле. Это доступно через следующий код:

var attr;
attr = document.body.getAttribute("class");
//IE 8 Quirks and below
attr = document.body.getAttribute("className");

Атрибуты возвращаются в виде строки и могут быть несовместимы от браузера к браузеру. Тем не менее, они могут быть жизненно важны в некоторых ситуациях. Как показано выше, в IE 8 Quirks Mode (и ниже) ожидается имя свойства DOM в get/set/removeAttribute вместо имени атрибута. Это одна из многих причин, почему важно знать разницу.

DOM Properties

Синтаксис:

document.body.onload = foo;

Назначение: Предоставляет доступ к свойствам, принадлежащим узлам элемента. Эти свойства похожи на атрибуты, но доступны только через JavaScript. Это важное различие, которое помогает прояснить роль свойств DOM. Обратите внимание, что атрибуты полностью отличаются от свойств, так как это назначение обработчика событий бесполезно и не получит событие (тело не имеет события onload, только атрибут onload).

Визуализация: DOM Properties

Здесь вы увидите список свойств на вкладке "DOM" в Firebug. Это свойства DOM. Вы сразу заметите довольно много из них, так как использовали их раньше, даже не подозревая об этом. Их значения - это то, что вы получите через JavaScript.

Документация

пример

HTML: <textarea id="test" value="foo"></textarea>

JavaScript: alert($('#test').attr('value'));

В более ранних версиях jQuery это возвращает пустую строку. В 1.6 он возвращает правильное значение, foo,

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

Матф

Источник

Свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.

Дальнейшие детали

Если вы измените атрибут, это изменение будет отражено в DOM (иногда с другим именем).

Пример: изменение class атрибут тега изменит className свойство этого тега в DOM. Если у вас нет атрибута для тега, у вас все еще есть соответствующее свойство DOM с пустым значением или значением по умолчанию.

Пример: пока у вашего тега нет class атрибут, свойство DOM className существует с пустым строковым значением.

редактировать

Если вы измените один, другой будет изменен контроллером, и наоборот. Этот контроллер не в jQuery, а в собственном коде браузера.

Источник

Это просто различие между атрибутами HTML и объектами DOM, которое вызывает путаницу. Для тех, кому удобно действовать на нативных свойствах элементов DOM, таких как this.srcthis.valuethis.checked так далее, .prop это очень теплый прием в семье. Для других это просто дополнительный слой путаницы. Давайте проясним это.

Самый простой способ увидеть разницу между .attr а также .prop это следующий пример:

<input blah="hello">
  1. $('input').attr('blah'): возвращается 'hello' как и ожидалось. Здесь нет сюрпризов.
  2. $('input').prop('blah'): возвращается undefined - потому что он пытается сделать [HTMLInputElement].blah - и такого свойства в этом объекте DOM не существует. Он существует только в области видимости как атрибут этого элемента, т.е. [HTMLInputElement].getAttribute('blah')

Теперь мы изменим несколько вещей так:

$('input').attr('blah', 'apple');
$('input').prop('blah', 'pear');
  1. $('input').attr('blah'): возвращается 'apple' а? Почему бы не "груша", как это было установлено последним на этом элементе. Поскольку свойство было изменено для входного атрибута, а не для самого входного элемента DOM - они в основном почти работают независимо друг от друга.
  2. $('input').prop('blah'): возвращается 'pear'

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

Смотрите скрипку, демонстрирующую разницу: http://jsfiddle.net/garreh/uLQXc/

.attr против .prop:

Раунд 1: стиль 

<input style="font:arial;"/>
  • .attr('style') - возвращает встроенные стили для соответствующего элемента, т.е. "font:arial;"
  • .prop('style') - возвращает объект объявления стиля, т.е. CSSStyleDeclaration

Раунд 2: ценность 

<input value="hello" type="text"/>   

$('input').prop('value', 'i changed the value');
  • .attr('value') - возвращает 'hello' *
  • .prop('value') - возвращает 'i changed the value'

* Примечание: jQuery по этой причине имеет .val() метод, который внутренне эквивалентен .prop('value')

Источник

TL;DR

использование prop() над attr() в большинстве случаев.

Свойство - это текущее состояние элемента ввода. Атрибут является значением по умолчанию.

Свойство может содержать вещи разных типов. Атрибут может содержать только строки

Источник

Грязная проверка

Эта концепция обеспечивает пример, где разница заметна: http://www.w3.org/TR/html5/forms.html

Попробуйте это:

  • нажмите на кнопку. Оба флажка были проверены.
  • снимите оба флажка.
  • нажмите кнопку еще раз. Только prop флажок был проверен. BANG! 

$('button').on('click', function() {
  $('#attr').attr('checked', 'checked')
  $('#prop').prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>attr <input id="attr" type="checkbox"></label>
<label>prop <input id="prop" type="checkbox"></label>
<button type="button">Set checked attr and prop.</button>

Для некоторых атрибутов, таких как disabled на button, добавление или удаление атрибута содержимого disabled="disabled" всегда переключает свойство (называемое атрибутом IDL в HTML5), потому что http://www.w3.org/TR/html5/forms.html говорит:

Отключенный атрибут IDL должен отражать отключенный атрибут содержимого.

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

Для других атрибутов, таких как checked="checked" на input type="checkbox", вещи ломаются, потому что как только вы нажимаете на него, он становится грязным, а затем добавляя или удаляя checked="checked" Атрибут содержимого больше не переключает проверяемость.

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

Источник

Все есть в док:

Разница между атрибутами и свойствами может быть важна в определенных ситуациях. До версии jQuery 1.6 метод.attr() иногда учитывал значения свойств при извлечении некоторых атрибутов, что могло вызвать противоречивое поведение. Начиная с jQuery 1.6, метод.prop() предоставляет способ явного получения значений свойств, в то время как.attr() извлекает только атрибуты.

Так что используйте опору!

Источник

атрибуты находятся в вашем текстовом документе / файле HTML (== представьте, что это результат анализа вашей разметки html), тогда как
свойства находятся в дереве HTML DOM (== в основном фактическое свойство некоторого объекта в смысле JS).

Важно отметить, что многие из них синхронизируются (если вы обновляете class имущество, class атрибут в html также будет обновлен; и иначе). Но некоторые атрибуты могут быть синхронизированы с неожиданными свойствами - например, атрибут checked соответствует собственности defaultChecked, чтобы

  • ручная установка флажка изменится .prop('checked') значение, но не изменится .attr('checked') а также .prop('defaultChecked') ценности
  • установка $('#input').prop('defaultChecked', true) также изменится .attr('checked'), но это не будет видно на элементе.

Правило большого пальца: .prop() Метод должен использоваться для логических атрибутов / свойств и для свойств, которые не существуют в html (например, window.location). Все остальные атрибуты (те, которые вы можете увидеть в html) могут и должны продолжать работать с .attr() метод. ( http://blog.jquery.com/2011/05/10/jquery-1-6-1-rc-1-released/)

А вот таблица, которая показывает, где .prop() является предпочтительным (хотя .attr() все еще можно использовать).

таблица с предпочтительным использованием

Почему вы иногда хотите использовать.prop() вместо.attr(), где это официально рекомендовано?

  1. .prop() может вернуть любой тип - строка, целое число, логическое значение; в то время как .attr() всегда возвращает строку.
  2. .prop() Говорят, что примерно в 2,5 раза быстрее, чем .attr(),
Источник

.attr():

  • Получить значение атрибута для первого элемента в наборе соответствующих элементов.
  • Дает вам значение элемента, как это было определено в HTML при загрузке страницы

.prop():

  • Получить значение свойства для первого элемента в наборе соответствующих элементов.
  • Предоставляет обновленные значения элементов, которые изменяются с помощью javascript/jquery.
Источник

Обычно вы хотите использовать свойства. Используйте атрибуты только для:

  1. Получение пользовательского атрибута HTML (поскольку он не синхронизируется со свойством DOM).
  2. Получение атрибута HTML, который не синхронизируется со свойством DOM, например, получение "исходного значения" стандартного атрибута HTML, например <input value="abc">.
Источник

attributes -> HTML

properties -> ДОМ

Источник

До JQuery 1.6, attr() Метод иногда учитывал значения свойств при получении атрибутов, что вызывало довольно противоречивое поведение.

Введение prop() Метод предоставляет способ явного получения значений свойств, в то время как .attr() извлекает атрибуты

Документы:

jQuery.attr()Получить значение атрибута для первого элемента в наборе соответствующих элементов.

jQuery.prop()Получить значение свойства для первого элемента в наборе соответствующих элементов.

Источник

Одна вещь .attr() может сделать это .prop() не может: повлиять на селекторы CSS

Вот проблема, которую я не видел в других ответах.

CSS селектор [name=value]

  • ответит на .attr('name', 'value')
  • но не всегда .prop('name', 'value')

.prop() влияет только на несколько селекторов атрибутов

.attr() влияет на все атрибуты-селекторы

  • input[value]
  • input[naame]
  • span[name]
  • input[data-custom-attribute] (ни будет .data('custom-attribute') повлиять на этот селектор)
Источник

Осторожно напоминание об использовании prop(), пример:

if ($("#checkbox1").prop('checked')) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Вышеуказанная функция используется для проверки, установлен флажок 1 или нет, если установлен флажок: return 1; если нет: вернуть 0. Функция prop() используется здесь как функция GET.

if ($("#checkbox1").prop('checked', true)) {
    isDelete = 1;
} else {
    isDelete = 0;
}

Вышеуказанная функция используется для установки флажка 1, который будет проверяться, и ВСЕГДА возвращать 1. Теперь функция prop() используется в качестве функции SET.

Не путайся

P/S: когда я проверяю свойство Image src. Если src пуст, prop возвращает текущий URL страницы (неверно), а attr возвращает пустую строку (справа).

Источник

jQuery 1.6 представляет функцию.prop() и разделяет атрибуты и свойства DOM, он вызывает много вопросов о разнице между функциями.attr и.prop.

см. ниже примеры:

Пример: 1)

<input id="demo" type="text" dbvalue="Kansagara" />

$("#demo").attr("dbvalue");   // returns Kansagara
$("#demo").prop("dbvalue");   // returns undefined

.prop() возвращает значение только атрибута HTML DOM, он не возвращает значение настраиваемого атрибута, в то время как.attr() также возвращает значение настраиваемого атрибута, показанное выше.

Пример:2)

<input id="demo" type="text" value="Kansagara" />

Теперь я изменил текст "Kansagara" на "Hitesh" в текстовом поле.

$("#demo").attr("value");   // returns Kansagara
$("#demo").prop("value");   // returns Hitesh

Теперь вы поняли, что это значит. Изменяется только свойство элемента, поскольку оно находится в DOM и является динамическим. Но атрибут элемента находится в тексте HTML и не может быть изменен. В широком смысле свойство всегда представляет текущее состояние, в то время как атрибут (за исключением старых версий IE) представляет начальное состояние или предназначен для атрибутов html, поскольку они строго определены. атрибут ничего не говорит о текущем состоянии.

для галочки (jquery 1.6+)

<input id="check1" checked="checked" type="checkbox" />

.attr('checked') //returns  checked
.prop('checked') //returns  true
.is(':checked') //returns true

Метод prop возвращает логическое значение для check, selected, disabled, readOnly..etc, а attr возвращает определенную строку. Таким образом, вы можете напрямую использовать.prop ('флажок') в условии if.

.attr() вызывает.prop() внутри, поэтому метод.attr() будет немного медленнее, чем прямой доступ к ним через.prop().

Для jQuery 1.6+ в основном будет использоваться prop, потому что он прост и шире, чем attr. В большинстве старых проектов attr используется для получения информации о текущем состоянии элемента. Но теперь реквизит занял эту работу, и его заменят.

Надеюсь, поможет.

Источник

В prop() vs attr() есть еще несколько соображений:

  • selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked и defaultSelected..etc должны быть получены и установлены с помощью метода.prop (). Они не имеют соответствующих атрибутов и являются только свойствами.

  • Флажок для типа ввода

       .attr('checked') //returns  checked
   .prop('checked') //returns  true
   .is(':checked') //returns true

  • Метод prop возвращает логическое значение для отмеченных, выбранных, отключенных, readOnly..etc, в то время как attr возвращает определенную строку. Таким образом, вы можете напрямую использовать.prop ("проверено") в условии if.

  • .attr () вызывает.prop () внутри, поэтому метод.attr () будет немного медленнее, чем доступ к ним напрямую через.prop ().

Источник

1) свойство находится в DOM; атрибут находится в HTML, который анализируется в DOM.

2) $ (elem).attr ("флажок") (1.6.1+) "флажок" (строка) будет меняться в зависимости от состояния флажка

3) $( elem).attr( "флажок") (до версии 1.6) true (булево) Изменено с состоянием флажка

  • В основном мы хотим использовать для объекта DOM, а не пользовательский атрибут, как data-img, data-xyz,

  • Также некоторые различия при доступе checkbox значение и hrefс attr() а также prop() как все меняется с выходом DOM сprop() как полная ссылка от origin а также Boolean значение для флажка(pre-1.6)

  • Мы можем получить доступ только к элементам DOM с prop другой тогда это дает undefined

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
    p {
      margin: 20px 0 0;
    }
    b {
      color: blue;
    }
  </style>

</head>

<body>

  <input id="check1" type="checkbox" checked="checked">
  <label for="check1">Check me</label>
  <p></p>

  <script>
    $("input").change(function() {
      var $input = $(this);
      $("p").html(
        ".attr( \"checked\" ): <b>" + $input.attr("checked") + "</b><br>" +
        ".prop( \"checked\" ): <b>" + $input.prop("checked") + "</b><br>" +
        ".is( \":checked\" ): <b>" + $input.is(":checked")) + "</b>";
    }).change();
  </script>

</body>

</html>

Источник

.prop()

.prop( propertyName )
propertyName
Type: String
The name of the property to get.

Метод.prop() получает значение свойства только для первого элемента в соответствующем наборе. Он возвращает неопределенное значение для свойства, которое не было установлено, или если у сопоставленного набора нет элементов. Чтобы получить значение для каждого элемента отдельно, используйте циклическую конструкцию, такую ​​как метод.each () или.map () jQuery.

<html>
<head>
  <meta charset="utf-8">
  <title>prop demo</title>
  <style>
  p {
    margin: 20px 0 0;
  }
  b {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check me</label>
<p></p>

<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    ".attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    ".prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    ".is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>

</body>
</html>

.attr ()

.attr( attributeName )
attributeName
Type: String
The name of the attribute to get.

Метод.attr () получает значение атрибута только для первого элемента в соответствующем наборе. Чтобы получить значение для каждого элемента отдельно, используйте циклическую конструкцию, такую ​​как метод.each () или.map () jQuery.

Использование метода.attr () в jQuery для получения значения атрибута элемента имеет два основных преимущества:

Удобство: он может быть вызван непосредственно для объекта jQuery и связан с другими методами jQuery. Межбраузерная согласованность: значения некоторых атрибутов сообщаются непоследовательно в разных браузерах и даже в разных версиях одного браузера. Метод.attr () уменьшает такие несоответствия.

<html>
<head>
  <meta charset="utf-8">
  <title>attr demo</title>
  <style>
  em {
    color: blue;
    font-weight: bold;
  }
  div {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>

The title of the emphasis is:<div></div>

<script>
var title = $( "em" ).attr( "title" );
$( "div" ).text( title );
</script>

</body>
</html>
Источник

Ответ Гэри Хоула очень важен для решения проблемы, если код написан таким образом

obj.prop("style","border:1px red solid;")

Так как функция поддержки возврата CSSStyleDeclaration объект, приведенный выше код не будет работать должным образом в некоторых браузерах (протестировано с IE8 with Chrome Frame Plugin в моем случае).

Таким образом, изменив его в следующий код

obj.prop("style").cssText = "border:1px red solid;"

решил проблему.

Источник
Другие вопросы по тегам