Class HTMLElement
- Namespace
- CSharpToJavaScript.APIs.JS
- Assembly
- CSharpToJavaScript.dll
The HTMLElement interface represents any HTML element. Some elements directly implement this interface, while others implement it via an interface that inherits it.
[Value("HTMLElement")]
public class HTMLElement : Element- Inheritance
-
HTMLElement
- Derived
- Inherited Members
Remarks
Constructors
HTMLElement()
public HTMLElement()Properties
AccessKey
The HTMLElement.accessKey property sets the keystroke which a user can press to jump to a given element.
[Value("accessKey")]
public string AccessKey { get; set; }Property Value
Remarks
NOTE
The
HTMLElement.accessKeyproperty is seldom used because of its multiple conflicts with already present key bindings in browsers. To work around this, browsers implement accesskey behavior if the keys are pressed with other "qualifying" keys (such as <kbd>Alt</kbd> + accesskey).
AccessKeyLabel
The HTMLElement.accessKeyLabel
read-only property returns a string containing the element's
browser-assigned access key (if any); otherwise it returns an empty string.
[Value("accessKeyLabel")]
public string AccessKeyLabel { get; }Property Value
Remarks
Autocapitalize
The autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input. It is available on all HTML elements, though it doesn't affect all of them, including:
[Value("autocapitalize")]
public string Autocapitalize { get; set; }Property Value
- string
A string that represents the element's capitalization behavior for user input. Valid values are as follows:
Remarks
autocapitalize doesn't affect behavior when typing on a physical keyboard. It affects the behavior of other input mechanisms such as virtual keyboards on mobile devices and voice input. This can assist users by making data entry quicker and easier, for example by automatically capitalizing the first letter of each sentence.
It reflects the value of the autocapitalize HTML global attribute.
-autocapitalize HTML global attribute
Autocorrect
The autocorrect property of the HTMLElement interface controls whether or not autocorrection of editable text is enabled for spelling and/or punctuation errors.
[Value("autocorrect")]
public bool Autocorrect { get; set; }Property Value
- bool
trueif auto-correction is enabled for the element, andfalseotherwise.
Remarks
The specific autocorrection behavior, including which words are substituted, depends on the user agent and the services provided by the underlying device.
For example, on macOS a user agent might rely on registered replacement text and punctuation.
Other devices and browsers may use a different approach.
The property reflects the value of the autocorrect HTML global attribute.
-autocapitalize HTML global attribute
Dir
The HTMLElement.dir property indicates the text writing directionality of the content of the current element. It reflects the element's dir attribute.
[Value("dir")]
public string Dir { get; set; }Property Value
- string
One of the following:
Remarks
Note that if the dir attribute is unspecified, the element itself may still inherit directionality from its parent. However, that inherited directionality is not reflected by this property's value.
The text writing directionality of an element is which direction that text goes (for support of different language systems). Arabic languages and Hebrew are typical languages using the RTL directionality.
-Dir
-HTML dir
global attribute
-CSS direction property
-CSS :dir pseudo-class
Draggable
The draggable property of the HTMLElement interface gets and sets a {{jsxref("Boolean")}} primitive indicating if the element is draggable.
[Value("draggable")]
public bool Draggable { get; set; }Property Value
Remarks
It reflects the value of the draggable HTML global attribute.
-draggable HTML global attribute
-HTML Drag and Drop API overview
EditContext
NOTE
ExperimentaleditContext property of the HTMLElement interface gets and sets an element's associated EditContext object.
[Value("editContext")]
public EditContext? EditContext { get; set; }Property Value
- EditContext
An EditContext object or
null.
Remarks
The {{domxref("EditContext API", "", "", "nocode")}} can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.
-The EditContext interface.
Hidden
The HTMLElement property hidden reflects the value of the element's hidden attribute.
[Value("hidden")]
public Union60? Hidden { get; set; }Property Value
- Union60?
This attribute may have one of three values:For details on the usage of this attribute, see the page for the
hiddenHTML attribute that this property reflects.
Remarks
Inert
The HTMLElement property inert reflects the value of the element's inert attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible.
[Value("inert")]
public bool Inert { get; set; }Property Value
- bool
A Boolean which is
trueif the element is inert; otherwise, the value isfalse.
Remarks
Note that if the inert attribute is unspecified, the element itself may still inherit inertness from its parent. However, that inherited inertness is not reflected by this property's value.
InnerText
The innerText property of the HTMLElement interface represents the rendered text content of a node and its descendants.
[Value("innerText")]
public string InnerText { get; set; }Property Value
- string
A string representing the rendered text content of an element.If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the TextContent property.
WARNING
SettinginnerTexton a node removes all of the node's children
and replaces them with a single text node with the given string value.
Remarks
As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
As a setter this will replace the element's children with the given value, converting any line breaks into br elements.
NOTE
innerTextis easily confused with TextContent, but there are important differences between the two.
Basically,innerTextis aware of the rendered appearance of text, whiletextContentis not.
Lang
The lang property of the HTMLElement interface indicates the base language of an element's attribute values and text content, in the form of a {{RFC(5646, "BCP 47 language identifier tag")}}. It reflects the element's lang attribute; the xml:lang attribute does not affect this property.
[Value("lang")]
public string Lang { get; set; }Property Value
- string
A string. Common examples include "en" for English, "ja" for Japanese, "es" for Spanish and so on. If unspecified, the value is an empty string.
Remarks
Note that if the lang attribute is unspecified, the element itself may still inherit the language from its parent. However, that inherited language is not reflected by this property's value.
OffsetHeight
The offsetHeight read-only property of the HTMLElement interface returns the height of an element, including vertical padding and borders, as an integer.
[Value("offsetHeight")]
public long OffsetHeight { get; }Property Value
- long
An integer.
Remarks
Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered). It does not include the height of pseudo-elements such as ::before or ::after. For the document body object, the measurement includes total linear content height instead of the element's CSS height. Floated elements extending below other linear content are ignored.
If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
-Determining the dimensions of elements
-ClientHeight
-ScrollHeight
-OffsetWidth
-OffsetLeft
-OffsetTop
-GetBoundingClientRect()
OffsetLeft
The offsetLeft read-only property of the HTMLElement interface returns the number of pixels that the upper left corner of the current element is offset to the left within the OffsetParent node.
[Value("offsetLeft")]
public long OffsetLeft { get; }Property Value
- long
An integer.
Remarks
For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the border box of an element relative to the offsetParent.
However, for inline-level elements (such as <span>) that can wrap from one line to the next, offsetTop and offsetLeft describe the positions of the first border box (use GetClientRects() to get its width and height), while offsetWidth and offsetHeight describe the dimensions of the bounding border box (use GetBoundingClientRect() to get its position). Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text.
-Determining the dimensions of elements
-ClientLeft
-ScrollLeft
-OffsetHeight
-OffsetWidth
-OffsetTop
-GetBoundingClientRect()
OffsetParent
The HTMLElement.offsetParent read-only property returns a
reference to the element which is the closest (nearest in the containment hierarchy)
positioned ancestor element.
[Value("offsetParent")]
public Element? OffsetParent { get; }Property Value
- Element
An object reference to the element in which the current element is offset.
Remarks
A positioned ancestor might be:
If there is no positioned ancestor element, the body is returned.
NOTE
offsetParentreturnsnullin the following
situations:
offsetParent is useful because
OffsetTop and
OffsetLeft are relative to its padding edge.
OffsetTop
The offsetTop read-only property of the HTMLElement interface returns the distance from the outer border of the current element (including its margin) to the top padding edge of the HTMLelement.OffsetParent, the closest positioned ancestor element.
[Value("offsetTop")]
public long OffsetTop { get; }Property Value
- long
A number.
Remarks
-Determining the dimensions of elements
-ClientTop
-ScrollTop
-OffsetHeight
-OffsetWidth
-OffsetLeft
-GetBoundingClientRect()
OffsetWidth
The offsetWidth read-only property of the HTMLElement interface returns the layout width of an element as an integer.
[Value("offsetWidth")]
public long OffsetWidth { get; }Property Value
- long
An integer.
Remarks
Typically, offsetWidth is a measurement in pixels of the element's CSS width, including any borders, padding, and vertical scrollbars (if rendered). It does not include the width of pseudo-elements such as ::before or ::after.
If the element is hidden (for example, by setting style.display on the element or one of its ancestors to "none"), then 0 is returned.
-Determining the dimensions of elements
-ClientWidth
-ScrollWidth
-OffsetHeight
-OffsetLeft
-OffsetTop
-GetBoundingClientRect()
OuterText
The outerText property of the HTMLElement interface returns the same value as InnerText.
When used as a setter it replaces the whole current node with the given text (this differs from innerText, which replaces the content inside the current node).
[Value("outerText")]
public string OuterText { get; set; }Property Value
- string
A string representing the rendered text content of an element and its descendants.If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the TextContent property.When used as a setter it replaces the current node with the given text, converting any line breaks into br elements.
Remarks
See InnerText for more information and examples showing how both properties are used as getters.
Popover
The popover property of the HTMLElement interface gets and sets an element's popover state via JavaScript ("auto", "hint", or "manual"), and can be used for feature detection.
[Value("popover")]
public string? Popover { get; set; }Property Value
- string
An enumerated value; possible values are:
Remarks
It reflects the value of the popover global HTML attribute.
-popover HTML global attribute
-Popover API
Spellcheck
The spellcheck property of the HTMLElement interface represents a boolean value that controls the spell-checking hint. It is available on all HTML elements, though it doesn't affect all of them.
[Value("spellcheck")]
public bool Spellcheck { get; set; }Property Value
- bool
A boolean value that is
trueif the spelling and grammar of the text content in the element may be checked,falseotherwise.
Remarks
It reflects the value of the spellcheck HTML global attribute.
-spellcheck HTML global attribute
Title
The HTMLElement.title property
represents the title of the element: the text usually displayed in a 'tooltip' popup
when the mouse is over the node.
[Value("title")]
public string Title { get; set; }Property Value
- string
A string.
Remarks
-The HTML title
global attribute.
Translate
The translate property of the HTMLElement interface indicates whether an element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
[Value("translate")]
public bool Translate { get; set; }Property Value
- bool
A boolean value that is
trueif an element's attribute values and the values of its Text node children are to be translated when the page is localized,falseotherwise.
Remarks
WritingSuggestions
The writingSuggestions property of the HTMLElement interface is a string indicating if browser-provided writing suggestions should be enabled under the scope of the element or not.
[Value("writingSuggestions")]
public string WritingSuggestions { get; set; }Property Value
- string
An enumerated value; possible values are:
Remarks
It reflects the value of the writingsuggestions HTML global attribute.
-writingsuggestions HTML global attribute
Methods
AttachInternals()
The HTMLElement.attachInternals() method returns an ElementInternals object.
This method allows a custom element to participate in HTML forms. The ElementInternals interface provides utilities for working with these elements in the same way you would work with any standard HTML form element, and also exposes the Accessibility Object Model to the element.
[Value("attachInternals")]
public ElementInternals AttachInternals()Returns
- ElementInternals
An ElementInternals object.
Remarks
Click()
The HTMLElement.click() method simulates a mouse click on an element. When called on an element, the element's Elementclick event is fired (unless its disabled attribute is set).
[Value("click")]
public GlobalObject.Undefined Click()Returns
Remarks
-Related event handlers-Element.Click
-Element.Dblclick
-Element.Auxclick
HidePopover()
The hidePopover() method of the HTMLElement interface hides a popover element (i.e., one that has a valid popover attribute) by removing it from the top layer and styling it with display: none.
[Value("hidePopover")]
public GlobalObject.Undefined HidePopover()Returns
Remarks
When hidePopover() is called on a showing element with the popover attribute, a HTMLElementbeforetoggle event will be fired, followed by the popover being hidden, and then the HTMLElementtoggle event firing. If the element is already hidden, an error is thrown.
ShowPopover(ShowPopoverOptions)
The showPopover() method of the HTMLElement interface shows a {{domxref("Popover_API", "popover", "", "nocode")}} element (i.e., one that has a valid popover attribute) by adding it to the top layer.
[Value("showPopover")]
public GlobalObject.Undefined ShowPopover(ShowPopoverOptions options = null)Parameters
optionsShowPopoverOptions
Returns
Remarks
When showPopover() is called on an element with the popover attribute that is currently hidden, a HTMLElementbeforetoggle event will be fired, followed by the popover showing, and then the HTMLElementtoggle event firing. If the element is already showing, an error will be thrown.
TogglePopover(Union61)
The togglePopover() method of the HTMLElement interface toggles a {{domxref("Popover_API", "popover", "", "nocode")}} element (i.e., one that has a valid popover attribute) between the hidden and showing states.
[Value("togglePopover")]
public bool TogglePopover(Union61 options = default)Parameters
optionsUnion61
Returns
- bool
trueif the popup is open after the call, andfalseotherwise.None (GlobalObject.Undefined) may be returned in older browser versions (see browser compatibility).
Remarks
When togglePopover() is called on an element with the popover attribute:
-popover HTML global attribute
-Popover API