Found 6704 Articles for Javascript

How to find width of a div using vanilla JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:49:27

377 Views

Overview A vanilla JavaScript is a framework of JavaScript, it provides mainly two different methods to find the width of a div using the "offsetWidth" and "clientWidth". Both methods have the ability to find the width of any element on a web page. In this vanilla JavaScript refers to the methods of the JavaScript that are predefined for the developers. It provides cross-platform compatibility. Syntax The Syntax to find the width of the div is given below. These two methods are used to calculate the width of the div. elementHTML.offsetWidth elementHTML.clientWidth elementHTML − It is the div ... Read More

How to find position of HTML elements in JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:44:53

399 Views

Overview JavaScript provides various methods for the manipulation and to get the information about the HTML elements. From the several methods JavaScript has its own predefined methods which returns the specific coordinates or position of the HTML element. These two methods are offsetLeft and offsetTop, these two methods return the exact position of the HTML elements. JavaScript also provides another function as getBoundingClientRect() this method also provides the same result as the offset method. The getBoundingRect() has four properties as top, left, right and bottom and the offset has only two properties that are left and top. Syntax The ... Read More

How to find height of text in HTML canvas using JavaScript ?

Aman Gupta
Updated on 13-Oct-2023 15:42:53

791 Views

Overview A canvas is a HTML element that provides us to display any type of custom text or graphics on the web page. A canvas makes a graphics editable through which we can make our own custom text or design. A canvas element can be added to the HTML using tag or using JavaScript we can add it through the 'document' object 'createElement' method. As we have to find the height of the text that is written in the HTML canvas, we can use the ''textMetrics" objects measureText() property to calculate height of the text. Syntax The Syntax used ... Read More

How to find area of a triangle using JavaScript?

Aman Gupta
Updated on 13-Oct-2023 18:31:02

1K+ Views

Overview The area of the triangle refers to the full area which means the perimeter of the triangle and the inside area. So to calculate the area of a triangle we will be calculating the perimeter of its and then the area but all these was the manual understanding of finding it. So by using JavaScript we will be automating this whole process which means a user only enters the sides of the triangle and to the interface and the area of the triangle will be calculated automatically. Expression (Heroine's Formula) The given below shows the heroine's formula expression − ... Read More

How to find average color of an image using JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:30:31

328 Views

Overview The extraction of colors from an image means that the colors which are present in an image in the form of pixels will be extracted, and an average of the pixels of the distinct is calculated in the form of RGB (Red Green Blue) and a new average color will be formed on the basis of the average of the color pixels. So we can achieve this with the help of JavaScript, in the JavaScript there is a property "canvas" which is used to draw an image or any content in the form of pixels. Approach To build this ... Read More

How to filter an object depending on the field's value in JavaScript?

Aman Gupta
Updated on 13-Oct-2023 15:18:57

117 Views

Overview An object in JavaScript is defined as a set of key−value pairs. It is used to define the properties of a single object. So to filter the object depending on the field's value can be achieved using JavaScript. By using the if−else condition we can filter the object depending on the value. So to filter from the object, first we have access to the key from the object, so for this we should have some prior knowledge of the object and its manipulation. As the manipulation of the object plays an important role in filtering the field value of ... Read More

How to filter nested objects in JavaScript?

Aman Gupta
Updated on 13-Oct-2023 14:46:39

1K+ Views

Overview A nested object in JavaScript is a simple object enclosed within the curly brackets, and to make a nested object an object is to inherit its own object. So to filter the object in JavaScript, JavaScript has provided its own method named "filter()", this filter() method takes the argument as a callback function in which a condition is returned at which the given array object will be filtered. So to achieve this filter task we will have to create a simple object as we create in other programming languages and then we will inherit some key value in the ... Read More

How to filter a nested JSON object to return certain value using JavaScript?

Aman Gupta
Updated on 13-Oct-2023 14:39:21

360 Views

Overview An object in JavaScript is a set of the data that is contained inside the curly braces in the key value pair form. An object in JavaScript is created by using the curly braces and defining the set of data inside it. A nested JSON object is also a set of a key value pair but in nested the key contains a set of objects inherited in it. We can use the two formats of accessing the value in the JSON objects: the first method is by directly accessing the value and the second method is by using the ... Read More

How to Change Background Color According to the Mouse Location using JavaScript?

Aayush Mohan Sinha
Updated on 12-Sep-2023 15:13:01

488 Views

JavaScript is a famous programming language that is one of the core languages of the World Wide Web (WWW) alongside HTML and CSS. It allows the programmer to capture events and modify the Document Object Model (DOM). In this article we are going to see how we can make use of JavaScript to change the background color according to the location of the mouse cursor. Mousemove Event The mousemove is an event which gets fired at an element when the cursor of the mouse is moved, and it is still inside the element of concern. It gives us information about ... Read More

How to Change an HTML Element Name Using jQuery?

Aayush Mohan Sinha
Updated on 12-Sep-2023 15:08:41

475 Views

jQuery is a JavaScript library created to make event handling, CSS animation, Ajax, and DOM tree navigation and manipulation easier. In this article we are going to see how we can change the name of an element using jQuery. Algorithm We are going to follow a three−way procedure to change the name of any element using jQuery: Identify and select the element we want to change. Copy all the attributes of the selected element to a temporary object. Create a new element with the new name and copy all the attributes to it. Replace the old element with this ... Read More

Advertisements