Found 609 Articles for Front End Scripts

To set all the border-radius properties in JavaScript, use the borderRadius property. Set the border-radius properties at once using this.ExampleYou can try to run the following code to learn how to set all the four border-radius properties −Live Demo                    #box {             border: thick solid gray;             width: 200px;             height: 200px          }                     Demo Text             Add border radius                function display() {             document.getElementById("box").style.borderRadius = "20px";          }          

To set the style of the bottom border, use the JavaScript borderBottomStyle property. It allows you to add a bottom border.ExampleYou can try to run the following code to set the style of the bottom border −           Demo Text             Click to set style of bottom border                function display() {             document.getElementById("box").style.borderBottomStyle = "dashed";          }          

In this tutorial, we will learn how to set the positioning area of the background image using JavaScript The background image’s positioning area in a program can be changed using the HTML DOM Style background-origin property. Background-origin is a feature that allows you to modify the background images of a webpage. The origin of the picture in the background is set using this property. The background image origin is set to the upper-left corner of the screen/webpage by default. The background-origin property specifies the origin of the background: from the border start, within the border, or the padding. When the ... Read More

To set all the border left properties in a single declaration, use the borderLeft property. You can try to run the following code to learn how to set the border left properties − Example Live Demo #box { border: thick solid gray; width: 300px; height: 200px } Demo Text Change left border function display() { document.getElementById("box").style.borderLeft = "thick solid #000000"; }

In this tutorial, we shall learn to set the width of the bottom border with JavaScript. To set the width of the bottom border, we can use the borderBottomWidth property in JavaScript. It allows you to change the width. Let us discuss our topic in brief. Using the borderBottomWidth Property With this property, we can set or return the width of an element's bottom border. Width is a floating point number with either a relative units designator (cm, mm, in, pt, or pc) or an absolute units designator (em, ex, or px). Syntax Following is the syntax to set the ... Read More

In this tutorial, we will look at the method to set the size of a background image with JavaScript. Background effects on a webpage enhance its look. We can set a background color or a background image to enhance the feel of the webpage. We can also change the background properties, like its size or color. To enhance the feel, the image must fit in the right position with the right size. Generally, we do this by using CSS, but JavaScript DOM also provides properties to do so. So, let us look at how to set the size of the ... Read More

To set the border width, style, and color in a single declaration, use the border property in JavaScript.ExampleYou can try to run the following code to learn how to set border in JavaScript −Live Demo           Set border                Demo Text          Demo Text                      function display() {             document.getElementById("box").style.border = "thick dashed #000000";          }          

To set the color of the bottom border in JavaScript, use the borderBottomColor property. It allows you to set the border color for the bottom of a border.ExampleYou can try to run the following code to learn how to set the color of the bottom border −Live Demo                    #box {             border: 2px dashed blue;             width: 120px;             height: 120px;          }                     Set border bottom color                Demo Text          Demo Text                      function display() {             document.getElementById("box").style.borderBottomColor = "yellow";          }          

In this tutorial, we shall learn to set the widths of the image border with JavaScript. To set the widths of the image border, use the borderImageWidth property in JavaScript. When we need an image as a border of our webpage content, we have to see how to set the width of the image border. Let us discuss the option to achieve this in brief. Using the Style borderImageWidth Property With the Style borderImageWidth property, we can set or return the widths of the image border of an element. The border image will range beyond the padding when the border ... Read More

In this tutorial, we will learn to change the value of an attribute in JavaScript. To build web applications, the most programmer uses three languages. HTML, CSS, and JavaScript. The HTML is used to create the base for the web page, CSS for styling, and JavaScript adds the dynamic behaviours to the web page. Users have seen on many websites that it changes the element's style when they just click on the button. We can make it happen using JavaScript. Using JavaScript, let’s look at setting the new attribute for the HTML element or changing the attribute values dynamically. To ... Read More