addClass (className)
Adds the specified class(es) to each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").addClass("warning-light height-md");
});
JS
append (elements, appendToStart)
Appends the specified elements or DOM fragment to each element in the set of matched elements or DOM fragment. Element objects specified as the first argument can be an HTMLElement, a WebUI onject, or a valid DOM fragment. If a valid DOM fragment string is specified, a new DOM element is created and converted to a WebUI object, and then appended.
Returns - WebUI object.
Argument
Type
Description
elements
Onject or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
appendToStart
Boolean
Either true or false. If true, elements are appended before any existing elements in the node list.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild").append("<div class='col-bp-2-over border-sm'>Label 3</div>");
});
JS
appendTo (to)
This method is similar to append(), but appends the matched elements or DOM fragment to a specified target element or DOM fragment at the end of the node list.
Returns - WebUI object.
Argument
Type
Description
to
Object or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("<div class='col-bp-2-over border-sm'>Label 3</div>").appendTo(ui("#containerChild"));
});
JS
attr (attrName)
Gets the specified attribute values of each element in the set of matched elements.
Returns - A single attribute value or an array of attribute values.
Argument
Type
Description
attrName
String
A single attribute name.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let ids = ui("#containerChild div").attr("id");
});
JS
attr (attrName, attrValue)
Sets the specified attribute value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
attrName
String
A single attribute name.
attrValue
String
A single attribute value. If set to null or "", the named attribute will be removed from the element.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().attr("id", "div1");
ui("#containerChild div").last().attr("id", "div2")
});
JS
css (ruleName)
Gets the specified computed css property values of each element in the set of matched elements.
Returns - A single css property value or an array of css property values.
Argument
Type
Description
ruleName
String
A single css property name.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let heights = ui("#containerChild div").css("height");
});
JS
css (ruleName, ruleValue)
Sets the specified css property value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
ruleName
String
A single css property name.
ruleValue
String
A single css property value. If set to null or "", the named css property will be removed from the element.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().css("height", "5rem");
ui("#containerChild div").last().css("height", "5rem")
});
JS
data (dataName)
Gets the specified data attribute values of each element in the set of matched elements.
Returns - A single data attribute value or an array of attribute values.
Argument
Type
Description
dataName
String
A single data attribute name.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0" data-percent="0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1" data-percent="50">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2" data-percent="100">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let percentages = ui("#containerChild div").data("percent");
});
JS
data (dataName, dataValue)
Sets the specified data attribute value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
dataName
String
A single data attribute name.
dataValue
String
A single data attribute value. If set to null or "", the named data attribute will be removed from the element.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0" data-percent="0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1" data-percent="50">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2" data-percent="100">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().data("percent", "10");
ui("#containerChild div").last().data("percent", "75")
});
JS
hasClass (className)
Determines whether the specified class(es) exist on any element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let hasBorderSm = ui("#containerChild div").hasClass("border-sm");
});
JS
hidden ()
Sets the visibility property to hidden of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().hidden();
});
JS
hide ()
Sets the display property to none of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().hide();
});
JS
html ()
Gets the inner html of each element in the set of matched elements.
Returns - The element inner html fragment or an array of element inner html fragments.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let htmlContent = ui("#containerChild").html();
});
JS
html (value)
Sets the specified inner html fragment for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
Any html fragment.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleDiv").html("<div class='width-xs height-sm background-dark'></div>");
});
JS
prependTo (to)
This method is similar to appendTo(), but prepends the matched elements or DOM fragment to a specified target element or DOM fragment at the start of the node list.
Returns - WebUI object.
Argument
Type
Description
to
Object or String
An HTMLElement, a WebUI object, or a valid DOM fragment.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("<div>Element 3</div>").prependTo(ui("#containerChild"));
});
JS
remove ()
Removes each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").remove();
});
JS
removeChildren ()
Removes all child elements of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild").removeChildren();
});
JS
removeClass (className)
Removes the specified class(es) from each element in the set of matched elements, or removes all classes from the class list if an astersik (*) is specified instead.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space, or and astersik (*).
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").removeClass("border-lg border-dark");
ui("#containerChild div").removeClass("*"); // Removes all classes
});
JS
setControlState (currentCssClass, newCssClass, controlMessage, revertOnClick, resetData)
Replaces an existing class with a new class on each element in the set of matched elements, optionally sets a text value if possible, optionally reverts all changes when clicked or tapped, and optionally clears a controls data.
Returns - WebUI object.
Argument
Type
Description
currentCssClass
String
A valid CSS class name or empty string. If an empty string is specified no existing classes will be removed. Required.
newCssClass
String
A valid CSS class name. Required.
controlMessage
String
A string that will be displayed within the control if possible or in a separate element if an Id is specified
in a data-validation-message attribute. If no controlMessage is specified, any validation messages will be cleared.
revertOnClick
Boolean
Specifies whether all style and data changes should be reverted when the element is clicked or tapped. Can be true or false. Default: false.
resetData
Boolean
Resets the data only and leaves changed styles in place. Can be true or false. Default: false.
<div class="flex flex-direction-column gap-xs width-xl pad-xl">
<input id="textURL" type="text"
class="input-lg rounded-md width-full" data-validation-text="textURLMessage" />
<label id="textURLMessage" class="control-message text-sm text-italic height-control-sm"></label>
<button class="button-lg button-info rounded-md feedback-active"
id="buttonValidate">Validate</button>
</div>
HTML
webui.ready( () => {
ui("#buttonValidate").click(() => {
if (!ui("#textURL").hasConformingString(ui.URL, false)) {
ui("#textURL").setControlState("", "control-danger", "Please enter a valid URL", false, false);
}
else {
ui("#textURL").setControlState("control-danger", "control-success");
}
});
});
JS
show (displayType)
Sets the display property to the specified display type of each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
displayType
String
A valid CSS display type. Default: "block".
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleContainer > div").first().show("flex");
});
JS
text ()
Gets the text content of each element in the set of matched elements.
Returns - A single text content value or an array of text content values.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let divTextContent = ui("#exampleDiv").text();
let textareaTextContent = ui("#exampleTextarea").text();
});
JS
text (value)
Sets the specified text content for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
A single text value.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleDiv").text("10");
ui("#exampleTextarea").text("Example text");
});
JS
toggle ()
Shows or hides all elements in the set of matched elements, and sets the aria-hidden attribute to either true or false.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#toggleButton").click( () => {
ui("#containerChild div").toggle();
});
});
JS
toggle (toggleState)
Shows or hides all elements in the set of matched elements depending on the toggleState argument, and sets the aria-hidden attribute to either true or false.
Returns - WebUI object.
Argument
Type
Description
toggleState
String
A value of "on" or "off".
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#toggleButtonOn").click( () => {
ui("#containerChild div").toggle("on");
});
ui("#toggleButtonOff").click( () => {
ui("#containerChild div").toggle("off");
});
});
JS
toggleClass (className)
Toggles the addition or removal of a class or set of classes for all elements in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
className
String
A single class name or a list of class names separated by a space.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#toggleButton").click( () => {
ui("#containerChild div").toggleClass("background-dark");
});
});
JS
val ()
Gets the value of each element in the set of matched elements.
Returns - A single element value or an array of element values.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
let textInputValue = ui("#exampleInput").val();
let selectInputValue = ui("#exampleSelect").val();
});
JS
val (value)
Sets the specified value for each element in the set of matched elements.
Returns - WebUI object.
Argument
Type
Description
value
String
A single value.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#exampleInput").val("10");
ui("#exampleSelect").val("5");
});
JS
visible ()
Sets the visibility property to visible of each element in the set of matched elements.
Returns - WebUI object.
<div class="container border-sm border-info pad-md" id="exampleContainer">
<div class="row gap-sm pad-items-md text-center" id="containerChild">
<div class="col-bp-2-over border-sm" id="element0">Label 0</div>
<div class="col-bp-2-over border-sm" id="element1">Label 1</div>
<div class="col-bp-2-over border-sm" id="element2">Label 2</div>
</div>
</div>
HTML
webui.ready( () => {
ui("#containerChild div").first().visible();
});
JS