Element


How to use the Element class of the bit Butil?

Usage
To use the browser Element features you need to inject the Bit.Butil.Element class and use it like this:
@inject Bit.Butil.Element element

<div @ref="elementRef">Element</div>

@code {
    private ElementReference elementRef;
  
    var rect = await element.GetBoundingClientRect(elementRef);
    // or
    var rect = await elementRef.GetBoundingClientRect();
}
Methods

GetAttribute:
Retrieves the value of the named attribute from the current node and returns it as a string (MDN).



GetAttributeNames:
Returns an array of attribute names from the current element (MDN).



GetBoundingClientRect:
Returns the size of an element and its position relative to the viewport (MDN).



HasAttribute:
Returns a boolean value indicating if the element has the specified attribute or not (MDN).



HasAttributes:
Returns a boolean value indicating if the element has one or more HTML attributes present (MDN).



SetPointerCapture:
Designates a specific element as the capture target of future pointer events (MDN).


HasPointerCapture:
Indicates whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer ID (MDN).


ReleasePointerCapture:
Releases (stops) pointer capture that was previously set for a specific pointer event (MDN).


RequestPointerLock:
Allows to asynchronously ask for the pointer to be locked on the given element (MDN).



RequestFullScreen:
Asynchronously asks the browser to make the element fullscreen (MDN).



Matches:
Returns a boolean value indicating whether or not the element would be selected by the specified selector string (MDN).



Scroll:
Scrolls to a particular set of coordinates inside a given element (MDN).



ScrollBy:
Scrolls an element by the given amount (MDN).



ScrollIntoView:
Scrolls the page until the element gets into the view (MDN).



RemoveAttribute:
Removes the named attribute from the current node (MDN).



SetAttribute:
Sets the value of a named attribute of the current node (MDN).



ToggleAttribute:
Toggles a boolean attribute, removing it if it is present and adding it if it is not present, on the specified element (MDN).



SetAccessKey, GetAccessKey:
Gets/Sets a string representing the access key assigned to the element (MDN).



SetClassName, GetClassName:
Gets/Sets a string representing the class of the element (MDN).



GetClientHeight:
Returns a number representing the inner height of the element in px (MDN).



GetClientLeft:
Returns a number representing the width of the left border of the element in px (MDN).



GetClientTop:
Returns a number representing the width of the top border of the element in px (MDN).



GetClientWidth:
Returns a number representing the inner width of the element in px (MDN).



SetId, GetId:
Gets/Sets a string representing the id of the element (MDN).



SetInnerHTML, GetInnerHTML:
Gets/Sets a string representing the markup of the element's content (MDN).



SetOuterHtml, GetOuterHtml:
Gets/Sets a string representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string (MDN).



GetScrollHeight:
Returns a number representing the scroll view height of an element (MDN).



GetScrollLeft:
A number representing the left scroll offset of the element (MDN).



GetScrollTop:
A number representing number of pixels the top of the element is scrolled vertically (MDN).



GetScrollWidth:
Returns a number representing the scroll view width of the element (MDN).



GetTagName:
Returns a string with the name of the tag for the given element (MDN).



IsContentEditable:
Returns a boolean value indicating whether or not the content of the element can be edited (MDN).



SetContentEditable, GetContentEditable:
Gets/Sets the contentEditable property, which specifies whether or not the element is editable (MDN).



SetDir, GetDir:
Gets/Sets the text writing directionality of the content of the current element (MDN).



SetEnterKeyHint, GetEnterKeyHint:
Gets/Sets the enterKeyHint property, which is an enumerated property defining what action label (or icon) to present for the enter key on virtual keyboards (MDN).



SetHidden, GetHidden:
Gets/Sets the hidden property, which reflects the value of the element's hidden attribute (MDN).


SetInert, GetInert:
Gets/Sets the inert property, which 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 (MDN).



SetInnerText, GetInnerText:
Gets/Sets the innerText property, which represents the rendered text content of a node and its descendants (MDN).



SetInputMode, GetInputMode:
Gets/Sets the inputMode property, which reflects the value of the element's inputmode attribute (MDN).



SetTabIndex, GetTabIndex:
Gets/Sets a number representing the position of the element in the tabbing order (MDN).



GetOffsetHeight:
Returns the height of an element, including vertical padding and borders in px (MDN).



GetOffsetLeft:
Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node (MDN).



GetOffsetTop:
Returns the distance from the outer border of the current element (including its margin) to the top padding edge of the offsetParent, the closest positioned ancestor element (MDN).



GetOffsetWidth:
The layout width of an element in px (MDN).



Blur:
Removes keyboard focus from the currently focused element (MDN).



Remove:
Removes the element from the children list of its parent (MDN).