powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / property vs attribute
8 сообщений из 8, страница 1 из 1
property vs attribute
    #39359008
questioner
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Читаю эту главу:

http://learn.javascript.ru/attributes-and-custom-properties

авторИзменение некоторых свойств обновляет атрибут. Но это скорее исключение, чем правило.

Чаще синхронизация – односторонняя: свойство зависит от атрибута, но не наоборот.

Например, при изменении свойства input.value атрибут input.getAttribute('value') не меняется:







Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
<body>
  <input id="input" type="text" value="markup">
  <script>
    input.value = 'new'; // поменяли свойство

    alert( input.getAttribute('value') ); // 'markup', не изменилось!
  </script>
</body>


То есть, изменение DOM-свойства value на атрибут не влияет, он остаётся таким же.

А вот изменение атрибута обновляет свойство:







Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
<body>
  <input id="input" type="text" value="markup">
  <script>
    input.setAttribute('value', 'new'); // поменяли атрибут

    alert( input.value ); // 'new', input.value изменилось!
  </script>
</body>


Эту особенность можно красиво использовать.

Получается, что атрибут input.getAttribute('value') хранит оригинальное (исходное) значение даже после того, как пользователь заполнил поле и свойство изменилось.

Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.


Последний абзац я не понял.

Вот написал я такой пример:

Код: html
1.
2.
3.
4.
<body>
  <input id="input" type="text" value="markup">
  
</body>


Код: javascript
1.
2.
3.
input.setAttribute('value', 'new'); // поменяли атрибут
alert( input.value ); // 'new', input.value изменилось!
alert(input.getAttribute('value')); 




Какое исходное значение НЕ поменялось я не понял. Наверное автор имел ввиду что-то иное. объясните плиз
...
Рейтинг: 0 / 0
property vs attribute
    #39359011
questioner
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
ну и еще пишут, что изменение аттрибута влияют на свойство

я что-то делаю не так?



у меня получается, что изменение свойства влияет на свойство, а изменение аттрибута на аттрибут и только.

Изменение аттрибута на свойства не влияют и наоборот.
...
Рейтинг: 0 / 0
property vs attribute
    #39359064
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
questionerКакое исходное значение НЕ поменялось я не понял. Наверное автор имел ввиду что-то иное. объясните плиз
Работай со свойством, а не атрибутом - тогда атрибут меняться не будет.
Вот это и хотел до тебя донести автор...
...
Рейтинг: 0 / 0
property vs attribute
    #39359066
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
questionerя что-то делаю не так?
Наверное.

Потому как все предельно просто...
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<input id="test" type="text" value="old">
<script type='text/javascript'>
var obj=document.getElementById('test');
obj.setAttribute('value', 'new');
alert('1. '+obj.getAttribute('value', 'new'))
alert('2. '+obj.value)
obj.value='test';
alert('1. '+obj.getAttribute('value', 'new'))
alert('2. '+obj.value)
</script>
</body>
</html>


Т.е. изменение атрибута меняет атрибут и свойство... А вот изменение свойства меняет только свойство, атрибут не меняется.
...
Рейтинг: 0 / 0
property vs attribute
    #39359145
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
krvsa
Код: javascript
1.
obj.getAttribute('value', 'new')


Читать как
Код: javascript
1.
obj.getAttribute('value')


Поторопился при копировании...
...
Рейтинг: 0 / 0
property vs attribute
    #39359273
questioner
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
krvsa
Т.е. изменение атрибута меняет атрибут и свойство... А вот изменение свойства меняет только свойство, атрибут не меняется.

я всё конечно, понимаю, но разве я не предоставил опровержение тому, что у меня это не работает и покзал реальный пример?
...
Рейтинг: 0 / 0
property vs attribute
    #39359311
mage.lan
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
questioner,

Вот не понимаю, зачем вам это?

Реальность такова, что есть
Код: javascript
1.
2.
3.
$(elem).attr('value');
$(elem).prop('value');
$(elem).val();


вам надо понимать когда и что использовать.

Зачем заниматься "хакерством"? Допустим вы на 100% разобрались для всех браузеров когда и что используется, начали это применять, приходит джуниор, который не знает этих нюансов, правит ваш код и все перестает работать... Виноваты будете вы.
...
Рейтинг: 0 / 0
property vs attribute
    #39359329
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
questionerно разве я не предоставил опровержение тому, что у меня это не работает
Нет у тебя никакого "опровержения".
questionerи покзал реальный пример?
Никакого примера нет.

Вот у меня есть пример (см.выше), ты его можешь скопировать в файл хтмл и запустить, посмотреть как он работает у тебя...
А вот у тебя таких примеров еще нет.
...
Рейтинг: 0 / 0
8 сообщений из 8, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / property vs attribute
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]