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
-
Economics & Finance
Web Development Articles
Page 371 of 801
How to set the brightness and contrast of an image with JavaScript?
JavaScript provides the CSS filter property to adjust image brightness and contrast dynamically. You access these filters through the style.filter property on image elements. Syntax element.style.filter = "brightness(value) contrast(value)"; Parameters Filter Default Value Range Effect brightness() 100% 0% to 200%+ 0% = black, 100% = normal, 200% = very bright contrast() 100% 0% to 200%+ 0% = gray, 100% = normal, 200% = high contrast Example: Interactive Brightness and Contrast Click below to change the brightness ...
Read MoreHow to set the left position of a positioned element with JavaScript?
To set the left position of a positioned element in JavaScript, use the style.left property. This property works on elements that have a CSS position value of absolute, relative, or fixed. Syntax element.style.left = "value"; The value can be specified in pixels (px), percentages (%), or other CSS units like em, rem, etc. Example Here's how to change the left position of a button when clicked: #myButton { ...
Read MoreHow to set the boldness of the font with JavaScript?
Use the fontWeight property in JavaScript to set the font boldness. This CSS property accepts values like "normal", "bold", "bolder", "lighter", or numeric values from 100 to 900. Syntax element.style.fontWeight = value; Parameters The fontWeight property accepts the following values: Value Description "normal" Default weight (equivalent to 400) "bold" Bold weight (equivalent to 700) "bolder" Bolder than parent element "lighter" Lighter than parent element 100-900 Numeric values (100 = thinnest, 900 = boldest) Example: Setting Font Weight with ...
Read MoreHow to set the height of an element with JavaScript?
Use the style.height property to dynamically set the height of HTML elements with JavaScript. This property accepts height values in pixels, percentages, or other CSS units. Syntax element.style.height = "value"; Where value can be in pixels (px), percentages (%), or other CSS units like em, rem, vh, etc. Example: Setting Button Height Heading 1 This is Demo Text. Update Height ...
Read MoreHow to preserve the readability of text when font fallback occurs with JavaScript?
The fontSizeAdjust property preserves text readability when font fallback occurs by maintaining consistent apparent size across different fonts. It adjusts the font size based on the aspect ratio (x-height to font-size ratio) to ensure uniform visual appearance. How fontSizeAdjust Works Different fonts have varying x-heights even at the same font-size. When a preferred font fails to load and falls back to another font, the text may appear too large or too small. The fontSizeAdjust property solves this by scaling the fallback font to match the aspect ratio of the preferred font. Syntax element.style.fontSizeAdjust = "value"; ...
Read MoreHow to set the space between characters in a text with JavaScript?
To set the space between characters in text, use the JavaScript letterSpacing property. This property controls the horizontal spacing between individual characters in a text element. Syntax element.style.letterSpacing = "value"; The value can be specified in pixels (px), em units, or other CSS length units. Negative values decrease spacing, while positive values increase it. Example: Setting Letter Spacing Here's a complete example that demonstrates how to set character spacing with JavaScript: Letter Spacing Example ...
Read MoreHow to set listStyleImage, listStylePosition, and listStyleType in one declaration with JavaScript?
To set the list properties in a single declaration, use the listStyle property in JavaScript. This shorthand property allows you to set listStyleType, listStylePosition, and listStyleImage all at once. Syntax element.style.listStyle = "type position image"; Parameters The listStyle property accepts up to three values: listStyleType: disc, circle, square, decimal, none, etc. listStylePosition: inside, outside listStyleImage: url() or none Example: Setting Type and Position Apple ...
Read MoreHow to set the distance between lines in a text with JavaScript?
To set the distance between lines in text, use the lineHeight CSS property via JavaScript. This property controls the vertical spacing between lines of text within an element. Syntax element.style.lineHeight = value; The lineHeight value can be: Number: Multiplier of font size (e.g., "2" = 2x font size) Pixels: Fixed height (e.g., "30px") Percentage: Relative to font size (e.g., "150%") Example: Setting Line Height with Button Click Line Height Demo ...
Read MoreHow to set the position of the list-item marker with JavaScript?
To set the position of the marker of the list-item, use the listStylePosition property in JavaScript. This property determines whether the list marker appears inside or outside the list item's content flow. Syntax element.style.listStylePosition = "inside" | "outside" | "inherit"; Parameters Value Description inside Marker is positioned inside the list item's content box outside Marker is positioned outside the list item's content box (default) inherit Inherits the value from parent element Example: Interactive List Position ...
Read MoreHow to set the maximum height of an element with JavaScript?
Use the maxHeight property in JavaScript to set the maximum height of an element. This property controls how tall an element can grow, with content overflowing when the limit is reached. Syntax element.style.maxHeight = "value"; Parameters The maxHeight property accepts various values: Pixels: "200px" Percentage: "50%" (relative to parent) Keywords: "none" (no limit), "initial", "inherit" Example: Setting Maximum Height #box { width: 300px; background-color: gray; ...
Read More