Front End Technology Articles - Page 544 of 860

The HTML DOM Location href property returns/sets the string corresponding to the URL path.SyntaxFollowing is the syntax −Returning value of the href propertylocation.hrefValue of the href property setlocation.href = hrefExampleLet us see an example for Location href property − Live Demo Location href    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } Location-href Current URL:    var divDisplay = document.getElementById("divDisplay");    var urlSelect = document.getElementById("urlSelect");    function gethref(){       divDisplay.textContent = 'URL Path: '+location.href;    } OutputThis will produce the following output −Before clicking ‘Get href’ button −After clicking ‘Get href’ button −

The Location hostname property returns/sets the hostname for the URL path.SyntaxFollowing is the syntax −Returning value of the hostname propertylocation.hostnameValue of the hostname property setlocation.hostname = hostnameExampleLet us see an example for Location hostname property − Live Demo Location hostname    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } Location-hostname Current URL:    var divDisplay = document.getElementById("divDisplay");    var urlSelect = document.getElementById("urlSelect");    function getHostname(){       divDisplay.textContent = 'Hostname: '+location.hostname;    } OutputThis will produce the following output −Before clicking ‘Get Hostname’ button −After clicking ‘Get Hostname’ button −

The Location host property returns/sets the hostname and host port (if specified). Port might not get displayed if not explicitly specified.SyntaxFollowing is the syntax −Returning value of the host propertylocation.hostValue of the host property setlocation.host = hostname:hostExampleLet us see an example for Location host property − Live Demo Location host    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } Location-host Current URL: ... Read More

The Location hash property returns/appends a string value (anchor part) to a URL. Anchor part is prefixed with ‘#’ automatically and then appended.SyntaxFollowing is the syntax −Returning value of the hash propertylocation.hashValue of the hash property setlocation.hash = ‘string’ExampleLet us see an example for Location hash property − Live Demo Location hash    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    } ... Read More

The HTML DOM Local Storage clear() method is used for clearing the whole local storage entries.SyntaxFollowing is the syntax −localStorage.clear()OrsessionStorage.clear()ExampleLet us see an example for LocalStorage() method property − Live Demo LocalStorage clear()    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {       border-radius: 10px;    }    table, th, td {       border:1px solid black;       border-collapse: collapse;       margin: 0 ... Read More

The links Collection returns a list/collection of all the links corresponding to and/or elements.SyntaxFollowing is the syntax −Returning links collectiondocument.linksPropertiesHere, “links” collection can have the following properties and methods −Property/MethodDescriptionlengthIt returns the number of  and  elementsnamedItem()It returns the  or/and  element with the specified idExampleLet us see an example for links collection length property − Live Demo Links Collection length    form {       width:70%;       margin: 0 auto;       text-align: center;    }    * {       padding: 2px;       margin:5px;    }    input[type="button"] {   ... Read More

The Link type property sets/returns the type of a linked document.SyntaxFollowing is the syntax −Returning type attribute valuelinkObject.typeSetting type to a valid valuelinkObject.type = valueNOTE  − valid values include "text/javascript", "text/css", "image/gif", etc.ExampleLet us see an example for Link type property − Link type Link-type    var divDisplay = document.getElementById("divDisplay");    var extStyle = document.getElementById("extStyle");    divDisplay.textContent = 'The linked document type: '+extStyle.type+' is not compatible';    function correctType(){       extStyle.type = 'text/css';       divDisplay.textContent = 'Congrats! The linked document type: '+extStyle.type+' is compatible'; ... Read More

The HTML DOM Link sizes property returns the value of the sizes attribute of link element.NOTE − The sizes property is used only when rel property is set to ‘icon’SyntaxFollowing is the syntax −Returning sizes attribute valuelinkObject.sizesExampleLet us see an example for Link rel property − Live Demo Link sizes Link-sizes    var divDisplay = document.getElementById("divDisplay");    var extStyle = document.getElementById("extStyle");    if(extStyle.sizes == '10x10')       divDisplay.textContent = 'The linked icon size: '+extStyle.sizes+' is not compatible';    else       divDisplay.textContent = 'Congrats! The linked icon size is ... Read More

The HTML DOM Link rel property sets/returns the relationship between the current and the linked document and is required to mention.SyntaxFollowing is the syntax −Returning rel attribute valuelinkObject.relSetting rel to a valueStringlinkObject.rel = valueStringValue StringsHere, “valueString” can be the following −valueStringDescriptionalternateIt providesauthorIt provides a link to the author of the linked documentdnsprefetchIt specifies that the browser should pre-emptively perform DNS resolution for the target resource's originhelpIt provides a link to a help document if anyiconIt imports an icon to represent the documentrelIt sets/returns the relationship between the current and the linked documentlicenseIt provides copyright information for the linked documentnextIt provides ... Read More

The HTML DOM Link Object in HTML represents the element.SyntaxFollowing is the syntax −Creating a elementvar linkObject = document.createElement(“LINK”)propertiesHere, “LinkObject” can have the following properties −PropertyDescriptioncrossOriginIt sets/returns the the CORS settings of the linked documentdisabledIt sets/returns whether the linked document is disabled, or nothrefIt sets/returns the URL of the linked documenthreflangIt sets/returns the language code of the linked documentmediaIt sets/returns the media type for the link element tagrelIt sets/returns the relationship between the current and the linked documentsizesIt returns the value of the sizes attribute of the linked documenttypeIt sets/returns the content type of the linked documentExampleLet us ... Read More