Found 9053 Articles for Front End Technology

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

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

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";             }          }          

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.

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")          }          

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

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

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);          }          

This tutorial will teach how to add an event handler to an element in JavaScript. There are two ways to add an event handler to any element, the first is using the addEventListener method and another is using the event attributes. Using the addEventListener() Method The addEventListener() method is used to attach an event handler to any DOM element. The syntax of this method is following. Syntax element.addEventListener( event, function, capture ) Parameter Event − The name of the event you want to apply on the element e.g. click, mouseover, submit, etc. Function − The callback function which ... Read More

It is very common to use the events while we are programming in JavaScript. Suppose you are creating a modal that opens up on clicking a button or hovering over using the cursor, here we using two events on a single element but JavaScript does not have any official way to use many event listeners on a single element. In this article, we will learn How to add many Event Handlers to the same element with JavaScript HTML DOM. To achieve this, we have the following approaches given below. Using Multiple addEventListener Methods Using the ES6 Way Using ... Read More