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
Articles by Gungi Mahesh
22 articles
How to Change the Background Color after Clicking the Button in JavaScript?
To change the background color after clicking the button in JavaScript, we are going to discuss two different approaches. We have to perform two simple tasks: adding a click event listener and changing the background color of the document. In this article our task is to understand how to change the background color after clicking the button in JavaScript. Approaches to Change Background Color on Clicking Button Here is a list of approaches to change the background color after clicking the button in JavaScript which we will be discussing in this article with stepwise explanation and complete ...
Read MoreHow to change Input box borders after filling the box using JavaScript?
The style.border property is used to change an element's border styling in JavaScript. It allows you to modify the border-color, border-style, and border-width properties dynamically. This is particularly useful for providing visual feedback when users interact with form elements. We use the onchange event to trigger border changes after filling input boxes. The onchange event occurs when the value of an HTML element changes and the element loses focus. This differs from oninput, which fires immediately as the user types. The onchange event works with various form elements including text inputs, radio buttons, checkboxes, and select dropdowns. It's ...
Read MoreHow to change font style using drop-down list in JavaScript?
In JavaScript, you can change the font style of text elements using a dropdown list by combining HTML select elements with the style.fontFamily property. This creates an interactive way for users to change text appearance dynamically. A dropdown list (select element) allows users to choose from multiple font options. When a selection is made, JavaScript captures the change event and applies the selected font to target elements. Syntax The basic syntax for changing font family using JavaScript: element.style.fontFamily = "fontName"; HTML select element with options: Arial ...
Read MoreHow to change the font-weight of a text using JavaScript?
Using JavaScript is one of the most effective ways to dynamically change the font-weight of any text on your webpage. Font weight refers to the boldness or thinness of characters, ranging from 100 (thin) to 900 (black/heavy). In this article, we will explore how to change font-weight using JavaScript for both single and multiple elements. Using the Style fontWeight Property The style.fontWeight property allows us to change the font weight of individual HTML elements. This property accepts both numeric values and keyword values. Syntax document.getElementById("elementId").style.fontWeight = "normal|lighter|bold|bolder|100-900|initial|inherit"; You can assign numeric values (100-900) ...
Read MoreHow to change the href value of tag after clicking on button using JavaScript?
The href attribute specifies the link's destination, which can be a URL or an anchor point within the same document. Changing the href attribute value allows us to dynamically update the destination of the link, which can be useful in creating interactive web applications. The tag (anchor tag) is used to create hyperlinks in HTML, linking to other web pages or specific locations within the same document. By combining JavaScript with HTML elements, we can modify these links dynamically based on user interactions. In this article, we'll explore how to change the href value of an anchor ...
Read MoreHow to set full-screen iframe with height 100% in JavaScript?
Setting an iframe to full-screen with 100% height is a common requirement in web development. This can be achieved using JavaScript's style.height property along with additional CSS properties to create a proper full-screen experience. The style.height property sets or returns the height of an HTML element as a string value. When combined with other style properties like position: fixed and proper positioning, it creates a true full-screen iframe overlay. Syntax element.style.height = "100%"; element.style.width = "100%"; element.style.position = "fixed"; element.style.top = "0"; element.style.left = "0"; element.style.zIndex = "9999"; Parameters ...
Read MoreHow to set location and location.href using JavaScript?
The window.location object in JavaScript provides methods to get and set the current page URL. You can redirect users to different pages using either location or location.href properties. The window.location object can be written without the window prefix. Common location properties include: location.href − Gets or sets the complete URL location.hostname − Gets the domain name location.protocol − Gets the protocol (http: or https:) location.pathname − Gets the path portion of the URL location.assign() − Loads a ...
Read MoreHow to set stroke width of a canvas circle using Fabric.js ?
The stroke and strokeWidth properties are used to set the stroke color and width of a canvas circle in Fabric.js. These properties allow you to customize the border appearance of circle objects. The Fabric.js Circle class provides a rich set of features for creating interactive circles. Unlike basic HTML5 canvas circles, Fabric.js circles are movable, resizable, and highly customizable with properties for stroke, fill, dimensions, and positioning. Syntax fabric.Circle({ radius: number, stroke: string, strokeWidth: number }); Parameters radius − Specifies the radius of the ...
Read MoreHow to set textarea scroll bar to bottom as a default using JavaScript/jQuery?
In JavaScript, you can set a textarea's scroll bar to the bottom using the scrollTop property. This is useful when you want to automatically show the most recent content, such as in chat applications or log displays. Syntax element.scrollTop = element.scrollHeight; Parameters scrollHeight − Returns the total height of the element's content, including content not visible due to overflow. Method 1: Using Pure JavaScript This approach uses the DOM's scrollTop property to position the scroll bar at the bottom of the textarea. ...
Read MoreHow to simulate a click with JavaScript ?
Simulating a click with JavaScript allows you to programmatically trigger click events on elements without user interaction. This is useful for automation, testing, or creating dynamic user interfaces. What is Click Simulation? Click simulation means programmatically triggering a click event on an HTML element using JavaScript's click() method or dispatchEvent(). This executes the same actions that would occur if a user physically clicked the element. Method 1: Using the click() Method The simplest way to simulate a click is using the built-in click() method: ...
Read More