Found 88 Articles for DOM

The borderLeftStyle property is used for setting or returning the left border style for an element.Following is the syntax for −Setting the borderLeftStyle property −object.style.borderLeftStyle = valueThe above properties are explained as follows −ValueDescriptionNoneThis is the default value specifying no border.HiddenThis is same as "none" but will still take border space. It is basically transparent but still there.dottedThis defines a dotted border.dashedThis defines a dashed border.solidThis defines a solid border.doubleThis defines a double bordergrooveThis defines a 3d groove border and is the opposite of ridgeridgeThis defines a 3D ridged border and is the opposite of grooveinsetThis defines a 3D inset ... Read More

The HTML DOM borderLeftColor property is used to get or set the color for left border of an element.Following is the syntax for −Setting the borderImageWidth property −object.style.borderLeftColor = "color|transparent|initial|inherit"The above properties are explained as follows −ValueDescriptioncolorFor specifying the left border color. The default color is set to blacktransparentThe makes the left border color transparent and the underlying content can be seen.initialFor setting this property to default value.inheritTo inherit the parent property value.Let us look at an example for the borderLeftColor property −Example Live Demo    #IMG1{       border-left:solid 8px;       border-left-color: orange;   ... Read More

The HTML DOM borderLeft property is used as a shorthand for getting or setting the left border properties for an element. The borderLeft property contains border-left-width, border-left-style, border-left-color.Following is the syntax for −Setting the borderImageWidth property −object.style.borderLeft = "width style color|initial|inherit"The above properties are explained as follows −ParameterDescriptionwidthFor setting the left border width.styleFor setting the left border style.colorFor setting the left border color.initialFor setting this property to default value.initialFor setting this property to default value.inheritTo inherit the parent property value.Let us look at an example for the borderLeft property −Example Live Demo    #P1 {       ... Read More

The HTML DOM borderImageWidth property is used to set or get the width of the border image for an element.Following is the syntax for −Setting the borderImageWidth property −object.style.borderImageWidth = "number|%|auto|initial|inherit"The above properties are explained as follows −ValueDescriptionlengthFor describing the border width size in px.numberFor describing the border width in multiples of corresponding border width and it’s default value is 1.%For describing the horizontal offsets and vertical off sets for the border image area width.autoThis sets the width and height corresponding to the image width and height.initialFor setting this property to default value.inheritTo inherit the parent property value.Let us look ... Read More

The HTML DOM borderImageSource property is used for setting or returning the source of the image to be used as border image for an element.Following is the syntax for −Setting the borderImageSource property −object.style.borderImageSource = "none|image|initial|inherit"The above properties are explained as follows −ValueDescriptionNoneThis means no image will be used. It will apply border styles if they are specified.ImageFor giving the path of the image to be used as border.The path to the image to be used as a borderillIt is used for preserving the border-image middle part.InitialFor setting this property to default value.InheritTo inherit the parent property value.Let us look ... Read More

The HTML DOM borderImageSlice property is used to define how a border image is divided into regions. This is done by specifying the border image offsets in percentage,  number or global values.Following is the syntax for −Setting the borderImageSlice property −object.style.borderImageSlice = "number|%|fill|initial|inherit"The above properties are explained as follows −ValueDescriptionnumberIt is used for denoting pixels in a raster image or vector coordinates in a vector image.%These are used for specifying the horizontal and vertical offsets relative to the picture size. Its default value is 100%.illIt is used for preserving the border-image middle part.initialFor setting this property to default value.inheritTo inherit the parent ... Read More

The HTML DOM Style pageBreakInside property returns and modify the page-break behavior for printing or print preview inside an HTML element in an HTML document.SyntaxFollowing is the syntax −1. Returning pageBreakInsideobject.pageBreakInside2. Modifying pageBreakInsideobject.pageBreakInside = “value”Here, value can be −ValueExplanationinitialIt sets this property value to its default value.inheritIt inherits this property value from its parent element.AutoIt inserts a page break inside the element in an HTML document if necessary.avoidIt avoids a page break inside the element in an HTML documentLet us see an example of HTML DOM Style pageBreakInside Property −Example Live Demo    body {       color: ... Read More

The HTML DOM Style pageBreakAfter property returns and modify the page-break behavior for printing or print preview after an HTML element in an HTML document.SyntaxFollowing is the syntax −1. Returning pageBreakAfterobject.pageBreakAfter2. Modifying pageBreakAfterobject.pageBreakAfter = “value”Here value can be −ValueExplanationinitialIt set this property value to its default value.inheritIt inherits this property value from its parent element.autoIt insert a page break before the element in an HTML document if necessary.alwaysIt always insert a page break before the element in an HTML document.avoidIt avoid a page break before the element in an HTML documentleftIn it the next page can be considered as a ... Read More

The HTML maxlength attribute defines the maximum number of characters allowed in the input HTML element in an HTML document.SyntaxFollowing is the syntax −Let us see an example of HTML maxlength Attribute −Example Live Demo    body {       color: #000;       height: 100vh;       background-color: #8BC6EC;       background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);       text-align: center;    }    input {       width: 300px;       background: transparent;       border: 2px solid #fff;       outline: none;       display: block; ... Read More

The HTML DOM Aside Object represent the element of an HTML document.Create aside object−SyntaxFollowing is the syntax −document.createElement(“ASIDE”);Let us see an example of aside object−Example Live Demo    body {       text-align: center;       background-color: #fff;       color: #0197F6;    }    h1 {       color: #23CE6B;    }    .btn {       background-color: #fff;       border: 2px solid #0197F6;       height: 2rem;       width: 40%;       margin: 2rem auto;       display: block;       color: #0197F6; ... Read More