The HTML DOM MouseEvent pageX property returns the horizontal (x) coordinate of the mouse pointer relative to the document if a mouse event was triggered. Use with pageY to get the vertical coordinate as well.Following is the syntax −Returning reference to the pageX objectMouseEventObject.pageXLet us see an example of MouseEvent pageX property −Example Live Demo MouseEvent pageX    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       width:70%; ... Read More

The HTML DOM MouseEvent offsetY property returns the vertical (y) coordinate of the mouse pointer relative to the target element if a mouse event was triggered. Use with offsetX to get the horizontal coordinate as well.Following is the syntax −Returning reference to the offsetY objectMouseEventObject.offsetYLet us see an example of MouseEvent offsetY property −Example Live Demo MouseEvent offsetY    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       ... Read More

The HTML DO MouseEvent offsetX property returns the horizontal (x) coordinate of the mouse pointer relative to the target element if a mouse event was triggered. Use with offsetY to get the vertical coordinate as well.Following is the syntax −Returning reference to the offsetX objectMouseEventObject.offsetXLet us see an example of MouseEvent offsetX property −Example Live Demo MouseEvent offsetX    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       width:70%;   ... Read More

The HTML DOM MouseEvent clientY property returns the vertical (y) coordinate of the mouse pointer if a mouse event was triggered. Use with clientX to get the horizontal coordinate as well.Following is the syntax −Returning reference to the clientY objectMouseEventObject.clientYLet us see an example of MouseEvent clientY property:Example Live Demo MouseEvent clientY    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       width:70%;       margin: 0 ... Read More

The HTML DOM MouseEvent clientX property returns the horizontal (x) coordinate of the mouse pointer if a mouse event was triggered. Use with clientY to get the vertical coordinate as well.Following is the syntax −Returning reference to the clientX objectMouseEventObject.clientXLet us see an example of MouseEvent clientX property −Example Live Demo MouseEvent clientX    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       width:70%;       margin: 0 ... Read More

The HTML DOM Meter value property returns/sets a number corresponding to the value attribute of a element. Use this with high, low, min and max attributes for better results.NOTE: Don’t use as a progress bar but only as a gauge.Following is the syntax −Returning value of the value propertymeterElementObject.valueValue of the value property setmeterElementObject.value = numberLet us see an example of Meter value property −Example Live Demo Meter value    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px; ... Read More

The HTML DOM Meter optimum property returns/sets a number corresponding to the optimum attribute of a element. Use this with high, low, min and max attributes for better results.NOTE: Don’t use as a progress bar but only as a gauge.Following is the syntax:Returning value of the optimum propertymeterElementObject.optimumValue of the optimum property setmeterElementObject.optimum = numberLet us see an example of Meter optimum property −Example Live Demo Meter optimum    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px; ... Read More

The HTML DOM Meter Object in HTML represents the element.NOTE: Don’t use as a progress bar but only as a gauge.Following is the syntax −Creating a elementvar meterObject = document.createElement(“METER”)Here, “meterObject” can have the following properties −PropertyDescriptionhighIt sets/returns the value ofthe high attribute in a gaugelabelsIt returns a list of elements that are labels for the gaugelowIt sets/returns the value ofthe low attribute in a gaugemaxIt sets/returns the value ofthe max attribute in a gaugeminIt sets/returns the value ofthe min attribute in a gaugeoptimumIt sets/returns the value ofthe optimum attribute in a gaugevalueIt sets/returns the value ofthe ... Read More

The HTML DOM Style listStyletype property is used for setting or returning the list-item marker type.Following is the syntax for −Setting the listStyleType property −object.style.listStyleType = valueSome of the listStyleType property values are −ValueDescriptionarmenianSetsthe marker to traditional Armenian numbers.circleCircleas marker.cjk-ideographicSetsplain ideographic numbers as marker.decimalThissets the marker number and is the default value..decimal-leading-zeroAddsa 0 before the numbers set as marker.discDefaultfor and the marker is the filled circle.hiraganaSetstraditional hiragana numbering as marker.katakanaSetsthe traditional Katakana numbering as marker.lower-alphaSetsthe marker as lower alphabet.lower-greekSetsthe lower-greek characters as marker.noneDisplaysno marker.squareDisplaysmarker as a square.upper-alphaSetsuppercase letters as marker.initialForsetting this property to initial value.inheritToinherit the parent property valueLet ... Read More

The HTML DOM Style listStylePosition property is used for setting or returning the list-item marker position.Following is the syntax for −Setting the listStylePosition property −object.style.listStylePosition = "outside|inside|initial|inherit"The above properties are explained as follows −ValueDescriptionoutsideThisis the default value and place list-item marker before text.insideThisindents the list item marker a little to the inside.initialForsetting this property to initial value.inheritToinherit the parent property valueLet us look at an example for the listStylePosition property −Example Live Demo    li{       background-color:lightgreen;    }    function changeListPosition() {       document.getElementById("LIST1").style.listStylePosition = "inside";       document.getElementById("Sample").innerHTML=" The ... Read More