diff --git a/files/en-us/web/api/htmlmeterelement/high/index.md b/files/en-us/web/api/htmlmeterelement/high/index.md new file mode 100644 index 000000000000000..edf67395676889a --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/high/index.md @@ -0,0 +1,54 @@ +--- +title: "HTMLMeterElement: high property" +short-title: high +slug: Web/API/HTMLMeterElement/high +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.high +--- + +{{ APIRef("HTML DOM") }} + +The **`high`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the high boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`high`](/en-US/docs/Web/HTML/Element/meter#high) attribute, or the value of `max` if not defined. The value of `high` is clamped by the `low` and `max` values. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. The value of `high`, but not less than {{DOMxRef("HTMLMeterElement.low")}} nor greater than {{DOMxRef("HTMLMeterElement.max")}}. + +## Examples + +```html + + +``` + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.high); // 66 +++meterElement.high; +console.log(meterElement.high); // 67 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.value")}} +- {{DOMXref("HTMLMeterElement.max")}} +- {{DOMXref("HTMLMeterElement.low")}} +- {{DOMXref("HTMLProgressElement")}} diff --git a/files/en-us/web/api/htmlmeterelement/low/index.md b/files/en-us/web/api/htmlmeterelement/low/index.md new file mode 100644 index 000000000000000..713711aafaaf70e --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/low/index.md @@ -0,0 +1,54 @@ +--- +title: "HTMLMeterElement: low property" +short-title: low +slug: Web/API/HTMLMeterElement/low +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.low +--- + +{{ APIRef("HTML DOM") }} + +The **`low`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the low boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`low`](/en-US/docs/Web/HTML/Element/meter#low) attribute, or the value of `min` if not defined. The value of `low` is clamped by the `min` and `max` values. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. The value of `low`, but not less than {{DOMxRef("HTMLMeterElement.min")}} nor greater than {{DOMxRef("HTMLMeterElement.max")}}. + +## Examples + +```html + + +``` + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.low); // 15 +--meterElement.low; +console.log(meterElement.low); // 14 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.value")}} +- {{DOMXref("HTMLMeterElement.min")}} +- {{DOMXref("HTMLMeterElement.high")}} +- {{DOMXref("HTMLProgressElement")}} diff --git a/files/en-us/web/api/htmlmeterelement/max/index.md b/files/en-us/web/api/htmlmeterelement/max/index.md new file mode 100644 index 000000000000000..a0f878bde3b53b5 --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/max/index.md @@ -0,0 +1,53 @@ +--- +title: "HTMLMeterElement: max property" +short-title: max +slug: Web/API/HTMLMeterElement/max +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.max +--- + +{{ APIRef("HTML DOM") }} + +The **`max`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the maximum value of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`max`](/en-US/docs/Web/HTML/Element/meter#max) attribute, or the `min` value if no `max` is set, or `1` if neither the `min` or the `max` is defined. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. The value of `max`, or the value of {{DOMxRef("HTMLMeterElement.min")}} or `1` if not defined. + +## Examples + +```html + + +``` + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.max); // 100 +--meterElement.max; +console.log(meterElement.max); // 99 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.value")}} +- {{DOMXref("HTMLMeterElement.min")}} +- {{DOMXref("HTMLProgressElement")}} diff --git a/files/en-us/web/api/htmlmeterelement/min/index.md b/files/en-us/web/api/htmlmeterelement/min/index.md new file mode 100644 index 000000000000000..04e57f239c03e3f --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/min/index.md @@ -0,0 +1,53 @@ +--- +title: "HTMLMeterElement: min property" +short-title: min +slug: Web/API/HTMLMeterElement/min +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.min +--- + +{{ APIRef("HTML DOM") }} + +The **`min`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the mimimum value of the {{htmlelement("meter")}} element as a number. It reflects the element's [`min`](/en-US/docs/Web/HTML/Element/meter#min) attribute, or `0` if no `min` is defined. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. + +## Examples + +```html + + +``` + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.min); // 0 +++meterElement.min; +console.log(meterElement.min); // 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.value")}} +- {{DOMXref("HTMLMeterElement.max")}} +- {{DOMXref("HTMLProgressElement")}} diff --git a/files/en-us/web/api/htmlmeterelement/optimum/index.md b/files/en-us/web/api/htmlmeterelement/optimum/index.md new file mode 100644 index 000000000000000..973d3f61a4d8e79 --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/optimum/index.md @@ -0,0 +1,51 @@ +--- +title: "HTMLMeterElement: optimum property" +short-title: optimum +slug: Web/API/HTMLMeterElement/optimum +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.optimum +--- + +{{ APIRef("HTML DOM") }} + +The **`optimum`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the optimum boundary of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`optimum`](/en-US/docs/Web/HTML/Element/meter#optimum) attribute, or the midpoint between `min` and `max` values if not defined. The value of `optimum` is clamped by the `min` and `max` values. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. The value of `optimum`, or the midpoint between {{DOMxRef("HTMLMeterElement.min")}} and {{DOMxRef("HTMLMeterElement.max")}} if not defined. + +## Examples + +In this example, no `optimum` value is set. + +```html + + +``` + +Though not explicitly defined, the default `optimum` is the midpoint between `min` and `max`, but can be set to any value between `min` and `max`, inclusive. + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.optimum); // 5 +meterElement.optimum = (meterElement.max + meterElement.optimum) / 2; +console.log(meterElement.optimum); // 7.5 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.value")}} +- {{DOMXref("HTMLMeterElement.high")}} +- {{DOMXref("HTMLMeterElement.low")}} +- {{DOMXref("HTMLProgressElement")}} diff --git a/files/en-us/web/api/htmlmeterelement/value/index.md b/files/en-us/web/api/htmlmeterelement/value/index.md new file mode 100644 index 000000000000000..32ac64b4c82ad8a --- /dev/null +++ b/files/en-us/web/api/htmlmeterelement/value/index.md @@ -0,0 +1,52 @@ +--- +title: "HTMLMeterElement: value property" +short-title: value +slug: Web/API/HTMLMeterElement/value +page-type: web-api-instance-property +browser-compat: api.HTMLMeterElement.value +--- + +{{ APIRef("HTML DOM") }} + +The **`value`** property of the {{DOMxRef("HTMLMeterElement")}} interface represents the current value of the {{htmlelement("meter")}} element as a `double`. It reflects the element's [`value`](/en-US/docs/Web/HTML/Element/meter#value) attribute. If no `value` is set, the {{DOMxRef("HTMLMeterElement.min")}} value or `0`, whichever is greater. + +This property can also be set directly, for example to set a default value based on some condition. + +## Value + +A number. The value of `value`, or either {{DOMxRef("HTMLMeterElement.min")}} or `0`, whichever if greater, if not defined. + +## Examples + +```html + + +``` + +```js +const meterElement = document.getElementById("fuel"); +console.log(meterElement.value); // 50 +--meterElement.value; +console.log(meterElement.value); // 49 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("meter")}} +- {{DOMXref("HTMLMeterElement.min")}} +- {{DOMXref("HTMLProgressElement")}}