Front End Technology Articles - Page 490 of 860

The HTML DOM Ol Object in HTML represents the element.Creating a elementvar olObject = document.createElement(“OL”)Here, “olObject” can have the following properties −PropertyDescriptionreversedItsets/returns whether the order of list should be descending orascending (default)startItsets/returns the value of the start attribute of an ordered listtypeItsets/returns the value of the type attribute of an ordered listLet us see an example of Ol start property −Example Live Demo HTML DOM Ol start    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;     ... Read More

The HTML DOM Object Object in HTML represents the  element.Creating an elementvar objectElement = document.createElement(“OBJECT”)Here, “objectElement” can have the following properties −PropertyDescriptiondataItsets/returns the URL of the resource being used by the objectelementformItreturns a reference to the enclosing form of the object elementheightItsets/returns the height of the object elementnameItsets/returns the name of the object elementtypeItsets/returns the content type for data downloaded via the dataattributeuseMapItsets/returns the name of a client-side image map to be used withthe object elementwidthItsets/returns the width of the object elementLet us see an example of HTML DOM Object Object property −Example Live Demo HTML DOM Object ... Read More

The HTML DOM Object form property returns the reference of enclosing form for element.Following is the syntax −Returning reference to the form objectObjectElement.formLet us see an example of Object form property −Example Live Demo HTML DOM Object form    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-Object-form                                            var divDisplay = document.getElementById("divDisplay");    var objSelect = document.getElementById("objSelect");    function getObjectForm() {       divDisplay.textContent = 'Location of above picture: '+objSelect.form.id;    } OutputBefore clicking ‘Get location of pic in website’ button −After checking ‘Get location of pic in website’ button −

The HTML DOM Object data property returns a string corresponding to the value of the attribute data.Following is the syntax −Returning string valueObjectElement.dataSet data property to a string valueObjectElement.data = URLStringLet us see an example of HTML DOM Object data property −Example Live Demo HTML DOM Object data    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-Object-data                                                          var divDisplay = document.getElementById("divDisplay");    var objSelect = document.getElementById("objSelect");    function getObjectData() {       objSelect.data       divDisplay.textContent = 'URL of above picture: '+objSelect.data;    } OutputBefore clicking ‘Get URL’ button −After clicking ‘Get URL’ button −

The HTML DOM Nav Object in HTML represents a element.Let us see an example of HTML DOM Nav object −Example Live Demo HTML DOM Nav    * {       padding: 2px;       margin:5px;    }       form {       width:70%;       margin: 0 auto;       text-align: center;    }    input[type="button"] {       border-radius: 10px;    }                    HTML-DOM-Nav                         ... Read More

The HTML DOM MouseEvent Object represents an event which incurs on interaction of mouse with the HTML document elements.Here, “MouseEvent” can have the following properties and methods −Property/MethodDescriptionaltKeyItreturns whether the "ALT" key on keyboard was pressedwhen the mouse event was triggeredbuttonItreturns a number corresponding to which mouse button was pressedwhen the mouse event was triggeredbuttonsItreturns which mouse buttons were pressed when the mouse event wastriggeredclientXItreturns the horizontal (x) coordinate of the mouse pointer, relative to the current window, when the mouse event was triggeredclientYItreturns the vertical (y) coordinate of the mouse pointer, relativeto the current window, when the mouse event ... Read More

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

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

The HTML DOM MouseEvent relatedTarget property returns the corresponding element that triggered the respective mouseover or mouseout event.Following is the syntax −Returning reference to the relatedTarget objectMouseEventObject.relatedTargetLet us see an example of MouseEvent relatedTarget property −Example Live Demo MouseEvent relatedTarget    * {       padding: 2px;       margin:5px;    }    form {       width:70%;       margin: 0 auto;       text-align: center;    }    #outer {       width:70%;       margin: 0 auto;       padding: 0;       text-align: center;   ... Read More

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