Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Front End Technology Articles
Page 468 of 652
HTML DOM Progress Object
The DOM Progress Object represent the element of an HTML document.Let us create progress object −SyntaxFollowing is the syntax −document.createElement(“PROGRESS”);PropertiesFollowing are the properties of progress object −PropertyExplanationmaxIt returns and alter the value of the max attribute of a progress element in an HTML document.positionIt returns the value of position attribute of a progress element in an HTML document.labelsIt returns a list of progress bar’s labels in an HTML document.valueIt returns and alter the content of the value attribute of a progress element in an HTML document.ExampleLet us see an example of progress object − Live Demo ...
Read MoreHTML DOM Select multiple Property
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 MoreHTML DOM Select name Property
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 MoreHTML DOM Select value Property
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 MoreHTML DOM Select size Property
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 MoreRole of CSS: valid Selector
Use the CSS : valid selector to style all elements with a valid value .ExampleYou can try to run the following code to implement the :valid SelectorLive Demo input:valid { background: red; color: white; } Heading The style (red color background) appears if you type a relevant/ valid email address.
Read MoreHTML DOM Input Number required Property
The HTML DOM input number required property returns and modify whether the input number field must be filled out before submitting the form.SyntaxFollowing is the syntax −Returning requiredobject.requiredModifying requiredobject.required = true | falseExampleLet us see an example of HTML DOM input number required 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; } input{ ...
Read MoreRole of CSS :target Selector
Use the CSS :target selector to highlight active HTML anchor with CSS.ExampleYou can try to run the following code to implement the :target SelectorLive Demo :target { border: 2px solid #D4D4D4; background-color: orange; color: white; } Click any of the subject below. Maths Java C++ C This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. Maths Tutorial Java Tutorial C++ Tutorial C Tutorial
Read MoreStyle the document's root element with CSS
To style document’s root element, use the CSS: root selector.ExampleYou can try to run the following code to implement the: root SelectorLive Demo :root { background: blue; color: white; } Heading This is demo text.
Read MoreCSS position: sticky;
The position: sticky; property allows you to position an element based on scroll position. Set an element as sticky on the top when a user scrolls down.ExampleYou can try to run the following code to implement CSS position: sticky;Live Demo div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 10px; background-color: orange; border: 1px solid blue; } Scroll and see the effect! Sticky! This is demo text. Scroll down to view the sticky div.
Read More