Found 9053 Articles for Front End Technology

To calculate text width, we can use the measureText() method in JavaScript. In canvas, the measureText() method is used to measure width of the text content. This means we can pass text to this canvas method and then call that method to measure the text. It will return an object that contains information about the measured text. Sometimes, width may be a float value; hence the Math.ceil() method is used to round the value and returns an integer. Syntax Following is the syntax of the method used to calculate the text width - const text = "Hello World!"; ... Read More

Use the wordWrap property in JavaScript to allow long words to be broken and wrap to the next line.ExampleYou can try to run the following to learn how to work with wordWrap property −                    #box {             width: 150px;             height: 150px;             background-color: lightblue;             border: 1px solid black;          }                     Set                ThisisDemoText.ThisisDemoText.ThisisDemoText.ThisisDemoText.Thisis DemoText.ThisisDemoText.                      function display() {             document.getElementById("box").style.wordWrap = "break-word";          }          

In this tutorial, we shall learn to set the style of an element's border with JavaScript. To set the style of an element’s border, use the borderStyle property in JavaScript. Let us discuss the borderStyle property available in detail. Using the borderStyle Property With the borderStyle property, we can set or return the style of an element's border. Syntax Following is the syntax to use the borderStyle property to set the style of an element’s border with JavaScript − object.style.borderStyle = style; This syntax allows us to set the required border style to the element's style. We will see ... Read More

In this tutorial, we shall learn to set the stack order of a positioned element in JavaScript. To set the stack order, we can use the style zIndex property. Let's first check what the stack order is. The stack order says the order in which the DOM elements are displayed. This is the element's position on the z-axis. Now, what is a positioned element? A positioned element has relative, absolute, fixed, or static positions. Why do we need to go for the stack order? Elements might overlap and look clumsy when positioned; therefore, we go for the stack order to ... Read More

In this tutorial, we will learn how to set the bottom position of a positioned element with JavaScript. The position property sets how the element should be positioned in the DOM, and the top, bottom, left, and right properties set the final location of the positioned elements. In JavaScript, we have different ways to set the bottom position of a positioned element, and in this tutorial, we will learn two of them − Using the style.bottom Property Using the style.setProperty Method Using the style.bottom Property In JavaScript, the style.bottom property of an element is used to set the ... Read More

In this article, we will learn how to set the spacing between words in a text in JavaScript. Word spacing is critical on websites because it improves the legibility and readability of the text displayed on the page. You can generate an aesthetically pleasing and easyto-read typeface using proper word spacing. In JavaScript, we use the wordSpacing Property to set the spacing between the words in a text displayed on a website. Using the Style wordSpacing Property This JavaScript DOM property is used to get and set the spacing between the words in a text Depending on your needs, ... Read More

Use the wordbreak property in JavaScript to set line breaking rules for non-CJK scripts. The following are CJK scripts: C for Chinese, J for Japanese, K for Korean.ExampleYou can try to run the following code to learn how to implement wordbreak property −                    #box {             width: 150px;             height: 120px;             background-color: lightblue;             border: 1px solid black;          }                     Set                This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.This is Demo Text.                      function display() {             document.getElementById("box").style.wordBreak = "break-all";          }          

In this tutorial, we will learn to set the width of an element in JavaScript. We can use the "width" property in JavaScript to set the width of an element. The web page should be responsive on every screen. Each element on a web page should have its area covered. We can set the size of elements by setting their width and height. Let us look at how to set the width of an element in JavaScript. Following is the property by which we can set the width of an element in JavaScript − The width style property ... Read More

In this tutorial, we shall learn to set when the transition effect starts with JavaScript. To set when the transition effect will start, use the JavaScript transitionDelay property. To make interactive components, we go for transition effects. Here let us get deeper into the topic and understand how we can set the transition start. Using the Style transitionDelay Property With Style transitionDelay property, we can set or return when the transition effect starts. We can specify the transitionDelay value in seconds(s) or milliseconds(ms). The delay can be either negative, positive, or zero. The transition effect starts immediately with a negative ... Read More

In this tutorial, we shall learn to set whether an element should be visible in JavaScript. Use the visibility property to hide or show an element. The visibility property takes different values such as visible, hidden, collapse, etc. To show an element, we set the visibility property to "visible" whereas to hide the element we set it to "hide". We can also set visibility using the display property. Let us briefly discuss the two properties in JavaScript to achieve our objective. Using the Style visibility Property JavaScript provides us with the visibility property with which we can ... Read More