diff --git a/files/en-us/glossary/enumerated/index.md b/files/en-us/glossary/enumerated/index.md index 3d7bc31f2b15f05..9d203c8c9fd43fa 100644 --- a/files/en-us/glossary/enumerated/index.md +++ b/files/en-us/glossary/enumerated/index.md @@ -9,7 +9,7 @@ In computer science, an **enumerated** type is a data type consisting of a limit ## HTML enumerated attributes -In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`. +In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`. Like for HTML tag names, HTML enumerated attributes and their values are case-insensitive, so `LTR`, `RTL`, and `AUTO` will also work. The IDL-reflected property, {{domxref("HTMLElement.dir")}}, can also be set using a case-insensitive value, but will always return the canonical format of the value defined in the specification (lowercased values in this example). See [Attribute reflection](/en-US/docs/Web/API/Document_Object_Model/Reflected_attributes) for more information. Each enumerated attribute has a default value for when the attribute is present without a value (the value is missing), and a default value for when the attribute is assigned an invalid value. Unlike {{Glossary("Boolean/HTML", "Boolean attribute")}} HTML attributes — which are always true when the attribute is present whether the value is present, omitted, or invalid — with enumerated HTML attributes, the default for an omitted value may be different from the default for invalid values. For example, the global HTML [`contenteditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute has two valid keywords: `true` and `false`. If the attribute is present but no value is set, the value is `true`. If a value is set, but is invalid, such as `contenteditable="contenteditable"`, the value maps to a third state, `inherit`. @@ -28,3 +28,4 @@ In JavaScript, enumerable properties are those properties whose internal enumera - {{Glossary("Boolean")}} - [JavaScript data types and data structures](/en-US/docs/Web/JavaScript/Guide/Data_structures) - [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) in the HTML Standard +- [Attribute reflection](/en-US/docs/Web/API/Document_Object_Model/Reflected_attributes) diff --git a/files/en-us/web/api/document_object_model/reflected_attributes/index.md b/files/en-us/web/api/document_object_model/reflected_attributes/index.md index 2a8b3cb2ce58972..d32aa612eb148ae 100644 --- a/files/en-us/web/api/document_object_model/reflected_attributes/index.md +++ b/files/en-us/web/api/document_object_model/reflected_attributes/index.md @@ -77,6 +77,36 @@ The {{domxref("Element.getAttribute()")}} will return `""` if the input is check The corresponding {{domxref("HTMLInputElement.checked")}} property returns `true` or `false` for the checked state. Otherwise boolean reflected attributes are the same as any other reflected attributes. +### Enumerated reflected attributes + +In HTML, [enumerated attributes](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute) are attributes with a limited, predefined set of text values. For example, the global HTML [`dir`](/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribute has three valid values: `ltr`, `rtl`, and `auto`. + +```html +

Right to left

+``` + +Like for HTML tag names, HTML enumerated attributes and their values are case-insensitive, so `LTR`, `RTL`, and `AUTO` will also work. + +```html +

Right to left

+``` + +The IDL-reflected property, {{domxref("HTMLElement.dir")}}, always returns a canonical value as provided in the specification (lowercased values in this example). Setting the value also serializes it to the canonical form. + +```js +const pElement = document.querySelector("p"); +console.log(pElement.dir); // "rtl" +pElement.dir = "RTL"; +console.log(pElement.dir); // "rtl" +``` + +Alternatively, you can use the {{domxref("Element.getAttribute()","getAttribute()")}} method of the {{domxref("Element")}} interface. It will get the attribute value from HTML without modifications. + +```js +const pElement = document.querySelector("p"); +console.log(pElement.getAttribute("dir"); // "RTL" +``` + ## Reflected element references > [!NOTE]