Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
The div tag is one of the most fundamental HTML elements used to create content divisions and sections on web pages. When building dynamic web applications, you often need to select specific div elements based on their HTML content or attribute values for styling, manipulation, or interaction purposes. This article demonstrates various methods to select div elements that contain specific HTML content or match particular values using CSS selectors, JavaScript, and HTML attributes. Method 1 - Using JavaScript to Select Divs by Text Content JavaScript provides powerful methods to traverse the DOM and select elements based on ... Read More
The HTML DOM Input Radio value property is used to set or return the value of the value attribute for a radio button element. This property allows you to access or modify the value that will be sent to the server when the form is submitted. The value property doesn't affect the visual appearance of the radio button on the webpage. Instead, it serves as an identifier to distinguish between different radio buttons in the same group when form data is processed. Syntax Following is the syntax to return the value property − radioObject.value ... Read More
The HTML Window innerHeight property returns the height of the browser window's content area in pixels, excluding toolbars, scrollbars, and other browser UI elements. This property is commonly used in responsive web design and dynamic layout calculations. Syntax Following is the syntax for accessing the innerHeight property − window.innerHeight Return Value The innerHeight property returns an integer representing the height of the browser window's content area in pixels. This value changes when the user resizes the browser window or when the browser's UI elements (like toolbars) are toggled. Basic Example Following ... Read More
A contenteditable div allows users to edit content directly in the browser. Creating a custom insertion point means programmatically placing the cursor at a specific position within the editable content using JavaScript's Range and Selection APIs. The contenteditable Attribute The contenteditable global attribute specifies whether an element should be user editable. When set to true, the browser enables editing functionality for that element, allowing users to modify its content directly. Syntax Following is the syntax for the contenteditable attribute − Content To create a custom insertion point, we use JavaScript's Range and ... Read More
Google AMP (Accelerated Mobile Pages) is an open-source framework designed to create fast-loading and mobile-friendly web pages. The amp-accordion component allows you to create collapsible content sections where users can toggle visibility of content by clicking on headers, making it perfect for creating hidden header functionality. The amp-accordion component is particularly useful for creating FAQ sections, collapsible menus, or any content that needs to be initially hidden but easily accessible. Each accordion section consists of a header (typically an or element) and content that can be expanded or collapsed. Syntax Following is the basic syntax ... Read More
SVG, or Scalable Vector Graphics, is a markup language built on XML used to create vector graphics. Unlike raster images (JPG, PNG), SVG images are resolution-independent and can be scaled to any size without losing quality. This makes them ideal for responsive web design where graphics must adapt to various screen sizes and containers. What is SVG? SVG is an XML-based markup language for creating vector graphics. Vector graphics are composed of shapes, lines, and curves defined by mathematical equations rather than pixels. This mathematical foundation allows SVG images to be infinitely scalable while maintaining crisp edges and ... Read More
The navigator.userAgent property in HTML returns a string containing the complete user-agent header that the browser sends to web servers. This string contains information about the browser name, version, operating system, and rendering engine, making it useful for browser detection and compatibility checks. Syntax Following is the syntax for the navigator userAgent property − navigator.userAgent Return Value The property returns a string representing the user-agent header. This string typically includes the browser name, version, operating system, and other identifying information that the browser reports to web servers. Example − Basic userAgent Display ... Read More
The filter property in CSS allows you to apply visual effects like blur, brightness, contrast, and sepia to HTML elements. When combined with the HTML5 Canvas API, you can capture these filtered elements and save them as downloadable images. Syntax Following is the syntax for the CSS filter property − filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url(); Following is the syntax for the HTML img tag − How It Works To save an HTML element with filters to an image, we use the following process − Canvas Element − Create an ... Read More
HTML canvas is a sophisticated web-based tool for producing interactive and dynamic visuals. Developers can use JavaScript to manipulate the canvas element to create animations, games, data visualizations, and more. The element creates a drawable region that can be controlled with JavaScript for rendering graphics, charts, and interactive content. Syntax Following is the basic syntax for creating an HTML canvas element − Your browser does not support the canvas element. To access the canvas in JavaScript for drawing operations − const canvas = document.getElementById('canvasId'); const ctx ... Read More
The HTML DOM Input Range disabled property sets or returns whether a range slider should be disabled. When set to true, the range slider becomes greyed out and unresponsive to user interaction. The property accepts boolean values and defaults to false. Syntax Following is the syntax for setting the disabled property − rangeObject.disabled = true|false; Following is the syntax for getting the disabled property − var isDisabled = rangeObject.disabled; Parameters The disabled property accepts the following boolean values − true − The range slider is disabled and ... Read More