Как добавить логический атрибут с помощью JavaScript

Question

Как добавить логические атрибуты с помощью JavaScript?Например, как можно изменить:

<p> на <p contenteditable>

<p> на <p data-example>

Answer 1

Чтобы добавить логический атрибут:

node.setAttribute(attributeName, '');
// example:
document.body.setAttribute('hidden', '');

Обратите внимание на пустую строку в качестве второго аргумента !

Используйте node.removeAttribute(attributeName), чтобы удалить атрибут, упомянутый другими.

Answer 2

Как правило, вы можете использовать element.setAttribute('attributeName', 'value') или element.propertyName = value для переключения атрибутов или свойств элемента.

Булевы атрибуты

Для логических атрибутов установите атрибут с одноименным значением:

element.setAttribute('disabled', 'disabled');

Удаление логического атрибута работает так же, как и другие атрибуты:

element.removeAttribute('disabled');

Однако ни один из ваших двух примеров не является логическими атрибутами !

contenteditable

contenteditable - это не логический атрибут, это перечисляемый атрибут. Возможные значения: пустая строка, "true" и "false".

.

Хотя setAttribute в этом случае кажется излишним, вы можете использовать его:

element.setAttribute('contenteditable', 'true');
// to undo:
element.removeAttribute('contenteditable');

Имя свойства для атрибута contenteditable равно contentEditable (обратите внимание на заглавную E), а распознает значения 'true', 'false' и 'inherit' - так Вы можете просто использовать:

element.contentEditable = 'true';
// to undo:
element.contentEditable = 'false';

Обратите внимание, что 'true' и 'false' здесь строки, а не логические значения.

data-example

Для атрибута data-example вы можете использовать:

element.setAttribute('data-example', 'some value'); // the value should be a string
// to undo:
element.removeAttribute('data-example');

Или в браузерах, которые поддерживают dataset (см. Те, которые выделены светло-зеленым на http://caniuse.com/dataset),, которые вы можете использовать:

element.dataset.example = 'some value';

Answer 3

Чтобы установить атрибут

Используйте element.setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute

Если вы добавите id как это:

<p id="p1">

, вы можете выбратьтакой элемент:

var p1 = document.getElementById("p1"); 

Для установки логического атрибута

Согласно спецификации W3C HTML4 :

Booleanатрибуты могут по закону принимать одно значение: имя самого атрибута

, поэтому вы можете добавить свой атрибут следующим образом:

p1.setAttribute("contenteditable", "contenteditable");

Для установки contentEditable

В соответствии со спецификацией W3C HTML5 атрибут contentEditable может иметь значения true, false иinherit.Тогда вам придется сделать что-то вроде этого:

p1.setAttribute("contenteditable", "true");

Если честно, я также не уверен, какой из них лучше в вашей ситуации.

Answer 4

Используйте element.dataset.example для изменения значения атрибута data-example.

Answer 5

Логические атрибуты считаются истинными, если они вообще присутствуют в элементе, независимо от их фактического значения;как правило, вы должны указывать пустую строку ("") в значении (некоторые люди используют имя атрибута; это работает, но не является стандартным).https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute

Answer 6

element.setAttribute('contenteditable','contenteditable')

или очистить:

element.removeAttribute('contenteditable')