Front End Technology Articles - Page 565 of 860

The HTML DOM Input Checkbox Object represents an input HTML element with type checkbox.SyntaxFollowing is the syntax −Creating an with type checkboxvar checkboxObject = document.createElement(“input”); checkboxObject.type = “checkbox”;AttributesHere, “checkboxObject” can have the following attributes −AttributesDescriptionautofocusIt defines if the checkbox should be focused on initial page load.checkedIt defines the state of checkbox i.e. checked/unchecked.defaultCheckedIt returns the default value of checked attribute i.e. true/falsedefaultValueIt sets/returns the default value of checkboxdisabledIt defines if checkbox is disabled/enabledformIt returns a reference of enclosing form that contains the checkboxindeterminateIt sets/returns indeterminate state of checkboxnameIt defines the value of name attribute of a checkboxrequiredIt defines if ... Read More

The HTML DOM Input Checkbox name property returns a string, which is the value of the name attribute of input checkbox. User can also set it to a new string.SyntaxFollowing is the syntax −Returning string valueinputCheckboxObject.nameSetting name attribute to a string valueinputCheckboxObject.name = ‘String’ExampleLet us see an example of Input Checkbox name property − Live Demo Name Attribute of Checkbox Enable new name: Change Name Attribute    function getFormID(){       var oldNameAttr = document.getElementById("formID");       var newNameAttr = document.getElementById("nameAttr");       if(oldNameAttr.checked == true){     ... Read More

The HTML DOM Input Checkbox form property returns the form containing the input checkbox.SyntaxFollowing is the syntax −Returning reference to the form objectinputCheckboxObject.formExampleLet us see an example of HTML DOM Input Checkbox form property − Live Demo Student Details Show Form ID: Get ID of form containing this Checkbox    function getFormID(){       var checkboxFilter = document.getElementById("formID");       var showResultDiv = document.getElementById("showResult");       if(checkboxFilter.checked == true){          showResultDiv.textContent = 'Form ID: ' + checkboxFilter.form.id;       } else {          showResultDiv.textContent = 'Check the checkbox';       }    } OutputThis will produce the following output −Before checking ‘Show Form ID’ checkbox −After checking ‘Show Form ID’ checkbox −

The HTML DOM Input Checkbox disabled property sets/returns whether Input Checkbox is to be enabled or disabled.SyntaxFollowing is the syntax −Returning boolean value − true/falseinputCheckboxObject.disabledSetting disabled to booleanValueinputCheckboxObject.disabled = booleanValueBoolean ValuesHere, “booleanValue” can be the following −booleanValueDetailstrueIt defines that the checkbox is disabled.falseIt defines that the checkbox is not disabled and it is also the default value.ExampleLet us see an example of Input Checkbox disabled property − Live Demo Student Details Biology: Mathematics: Physics: Psychology: Enable Subjects    function enableCheckboxes(){       var enableCheckboxes ... Read More

In this article we are going to learn how to find the inner height and inner width of a browser window using JavaScript. JavaScript defines window object methods and properties. The properties include inner height and inner width, which helps us to calculate the height and width of a window’s content area. There are two ways to calculate the inner height and inner width of a window. Using innerHeight and innerWidth properties − To get the inner height and inner width JavaScript has provided some properties such as window.innerHeight and window.innerwidth respectively. Using these properties, it is easy to ... Read More

The HTML DOM select size property returns and modify the value of the size attribute of a drop-down list.SyntaxFollowing is the syntax −Returning sizeobject.sizeModifying valueobject.size = “number”ExampleLet us see an example of HTML DOM select size property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    } ... Read More

The HTML DOM Select type property returns the value of the type attribute of drop-down list in an HTML document.SyntaxFollowing is the syntax −object.typeExampleLet us see an example of HTML DOM select type property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129, 125, 254, 1) 0%, rgba(111, 167, 254, 1) 90% ) no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{   ... Read More

The HTML DOM select value property returns and modify the content of the value attribute of a drop-down list.SyntaxFollowing is the syntax −Returning valueobject.valueModifying valueobject.value = true | falseExampleLet us see an example of HTML DOM select value property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.1rem;    }    .drop-down{       width:35%;       ... Read More

The HTML DOM select name property returns and modify the value of the name attribute of the drop-down list in an HTML document.Following is the syntax −Returning nameobject.nameModifying nameobject.name = “text”ExampleLet us see an example of HTML DOM select name property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:35%;   ... Read More

The HTML DOM select multiple property returns and modify whether multiple options can be selected from a drop-down list or not.SyntaxFollowing is the syntax −Returning multipleobject.multipleModifying multipleobject.multiple = true | falseExampleLet us see an example of HTML DOM select multiple property − Live Demo    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:50%;   ... Read More