Found 8894 Articles for Front End Technology

How to set the type of cursor to display for the mouse pointer with JavaScript?

Shubham Vora
Updated on 12-Oct-2022 11:04:31

2K+ Views

In this tutorial, we will learn to set the type of cursor for the mouse pointer with JavaScript. To set the type of cursor, use the cursor property in JavaScript. It allows you to change the cursor on the button click. We can even change the type of cursor by using JavaScript. Different types of cursors have different meanings. There are many styles of cursors that can use on our webpage. Let us look at how to set the type of cursor to display for the mouse pointer with JavaScript. Using the Style cursor Property The cursor property is used ... Read More

How to set the direction of the flexible items with JavaScript?

Shubham Vora
Updated on 09-Nov-2022 11:36:02

764 Views

In this tutorial, we will learn how to set the direction of the flexible items with JavaScript. The direction of the flexible items can be set using the flex-direction property of CSS. It defines how the flexible items will be placed in the flex container. Its default value is set to ‘row’, but it can have other values like ‘column’, ‘row-reverse’ etc. To set the direction of the flexible items with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them − Using the style.flexDirection Property Using the style.setProperty Method Using the style.flexDirection ... Read More

How to set the initial length of a flexible item with JavaScript?

Shubham Vora
Updated on 15-Nov-2022 08:00:41

218 Views

In this tutorial, we will learn how to set the initial length of a flexible item with JavaScript. Flexbox is a one-dimensional layout model that distributes space among items in an interface and provides flexible item alignment properties. It creates flexible items. Use the flexBasis property in JavaScript to set the initial length of a flexible item. In this tutorial, we will see two approaches to setting the initial length of a flexible item − Using the property style.flexBasis Using the method style.setProperty Using the style.flexBasis Property The style flexBasis is a flexbox property that determines the initial ... Read More

How to set the left margin of an element with JavaScript?

Shubham Vora
Updated on 15-Nov-2022 08:05:12

4K+ Views

In this tutorial, we will learn how to set the left margin of an element with JavaScript. Margin is the space around an element outside its border. The margin of an element can be on all sides, such as: left, right, top, and bottom. Use the marginLeft property in JavaScript to set the left margin. In this tutorial, we will discuss two approaches to setting the left margin − Using the marginLeft property Using the setProperty method Using the marginLeft property to set the left margin of an element The marginLeft property of an element in JavaScript is ... Read More

How to set the length of the item relative to the rest with JavaScript?

Abhinaya
Updated on 23-Jun-2020 12:16:12

70 Views

Use the flex property in JavaScript to set the length of the item relative to the rest. You can try to run the following code to implement flex property with JavaScript −Example                    #box {             border: 1px solid #000000;             width: 300px;             height: 400px;             display: flex;          }                              DIV1          DIV2          DIV3             Set                function display() {             var a = document.getElementById("box");             var b = a.getElementsByTagName("DIV");             var j ;             for (j = 0; j < b.length; j++) {                b[j].style.flex = "1";             }          }          

Which is the best JavaScript compressor?

Nitya Raut
Updated on 23-Jun-2020 12:24:06

107 Views

Here are some of the best JavaScript compressors available −Google Closure CompilerThe Google Closure compiler runs JavaScript quickly and used for a superior JavaScript. It parses your JavaScript, analyzes it, removes dead code, rewrites, and minimizes what's left.JSMinIf you want to minify, then use the JSMin to remove unnecessary comments.YUI CompressorThe YUI Compressor is used to minify the JavaScript files fastly and is secure.

Difference between window.location.href, window.location.replace and window.location.assign in JavaScript?

Arjun Thakur
Updated on 23-Jun-2020 12:14:47

386 Views

The window object includes the location object in JavaScript. It includes the following properties −window.location.hrefIt returns the URL of the current page.Example           Click below to get the complete URL of the page.       URL                function display() {             var res = location.href;             document.write(res);          }           window.location.replaceIt is used to replace the current document.Example           Replace current document                function display() {             location.replace("https://www.qries.com")          }           window.location.assignIf you want to load a new document, use JavaScript assign.Example           Open new document                function display() {             location.assign("https://www.qries.com")          }          

Set how many columns an element should span across with JavaScript.

Shubham Vora
Updated on 31-Oct-2022 11:55:27

244 Views

In this tutorial, we will learn to set how many columns an element should span across with JavaScript. Dividing long paragraphs or articles into many columns improves their readability. The ‘column-count’ CSS property divides the text into numerous columns. Set the columnSpan property to all if you want the columns to span across in JavaScript. To set how many columns an element should span across with JavaScript, we have multiple ways, and in this tutorial, we will discuss two of them − Set the columnSpan property Use the style.setProperty method Set the columnSpan Property In JavaScript, the columnSpan ... Read More

How to define the number of nodes in a node list with JavaScript HTML DOM?

Prince Varshney
Updated on 06-Dec-2022 09:21:12

251 Views

In this tutorial, we are going to learn how can we find the number of nodes present in a node list in JavaScript. To perform the specific operation, we need to use the HTML DOM which helps us to work with the object model of the webpage. Now let us first understand what a node is and what is a node list in HTML. Everything in an HTML document including element, text, attribute as well as the whole document is a node. Every small element present in an HTML document is part of the navigation tree of an HTML DOM. ... Read More

How to work with removeEventListener() method in JavaScript?

Ankith Reddy
Updated on 23-Jan-2020 08:17:15

96 Views

Use the removeEventListener() method in JavaScript to remove event handler attached with addEventListener() method.Example                    #box {             background-color: gray;             border: 2px dashed;          }                     Demo Text!          Click below to remove event handler.          Remove                            document.getElementById("box").addEventListener("mousemove", display);          function display() {             document.getElementById("pid").innerHTML = Math.random();          }          function removeEvent() {             document.getElementById("box").removeEventListener("mousemove", display);          }          

Advertisements