Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to set the inward offsets of the image border with JavaScript?
In this tutorial, we will learn how to set the inward offsets of the image border with JavaScript.
An image can be set in the border as a border image using CSS properties. The border image can be set using different parameters. To set the inward offsets of the image border, use the borderImageSlice property in JavaScript.
We will see two different approaches to setting up the inward offsets of the image border with JavaScript −
The borderImageSlice Property
The setProperty Method
Using the borderImageSlice Property
The border image’s inward offsets are specified by the borderImageSlice property of JavaScript. The style object of the element object has a borderImage property. The element object can be accessed using the document.getElementById() method and after that we can set the borderImageSlice property.
Syntax
document.getElementById('el').style.borderImageSlice = number | % | fill | inherit | initial
In the above syntax, The document.getElementById() method and borderImageSlice property is used to set the inward offsets of the image border.
Parameters
number − The inward offset of the border image in pixels.
% − The inward offset of the border image in percentage.
fill − The middle part of the border image to show.
inherit − The inward offset of the border image is inherited from its parent element’s property.
initial − The inward offset of the border image is set to default.
Example
In the below example, we have set the inward offsets of the image border with JavaScript using the borderImageSlice property. In addition, we have used the “setInwardOffset()” function, which sets the inward offsets of the border image for multiple elements with a different value in response to the button click event “Set Inward Offset”.
<html> <head> <style> div { padding: 15px; margin: 5px 0px; background-color: rgb(214, 207, 254); border: 20px dashed; border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <h2> Set the inward offsets of the image border using the <i> style.borderImageSlice </i> property </h2> <button onclick="setInwardOffset()"> Set Inward Offset </button> <div id="el1"> The Element No. 1 </div> <div id="el2"> The Element No. 2 </div> <div id="el3"> The Element No. 3 </div> <script> // All elements const element1 = document.getElementById('el1'); const element2 = document.getElementById('el2'); const element3 = document.getElementById('el3'); // 'Set Inward Offset' button click event handler function function setInwardOffset() { element1.style.borderImageSlice = '20% 20%'; element1.innerHTML = 'The Element No. 1 (borderImageSlice: 20% 20%)' element2.style.borderImageSlice = '15%'; element2.innerHTML = 'The Element No. 1 (borderImageSlice: 15%)' element3.style.borderImageSlice = '10% 20% 30% 40%'; element3.innerHTML = 'The Element No. 1 (borderImageSlice: 10% 20% 30% 40%)' } </script> </body> </html>
Using the setProperty Method
The setProperty method in JavaScript is used to set any new or existing property of an element by taking the property name and the property value in its arguments. This method is available in the style object that is present in the element object. The document.getElementById() method is used to get the element object so that we can execute the setProperty method. For example, to set the inward offsets of a border image, the setProperty method takes ‘border-image-slice’ as the first argument, and in the second argument, it takes the value.
Syntax
document.getElementById('el').style.setProperty(name, value, priority)
In the above syntax, the document.getElementById() method is used to access the element object so that we can use the setProperty method on it.
Parameters
name − The name of the property.
value − The property value.
priority − The priority of the property value (optional).
Example
In the below example, we have set the inward offsets of the image border with JavaScript using the setProperty method. We have used an input field to take the value of the inward offset from the user and a button “Set Inward Offset” that executes the “setInwardOffset()” function on the click event.
<html> <head> <style> div { padding: 15px; margin: 5px 0px; background-color: rgb(214, 207, 254); border: 20px dashed; border-image: url('https://www.tutorialspoint.com/images/neo4j.png'); border-image-outset: 0; border-image-repeat: round; } </style> </head> <body> <h2> Set the inward offsets of the image border using the <i> setProperty </i> method </h2> <h4> Enter the inward offset value for the border image: </h4> <input type="text" id="inward-offset" name="inward-offset" value="20%"> <button onclick="setInwardOffset()"> Set Inward Offset </button> <div id="root"> It is an element </div> <script> // 'Set Inward Offset' button click event handler function function setInwardOffset() { const root = document.getElementById('root'); // user input value for inward offset const inward_offset_value = document.getElementById('inward-offset').value; root.style.borderImageSlice = inward_offset_value; root.innerHTML = 'It is an element (borderImageSlice:' + inward_offset_value + ')'; } </script> </body> </html>
In this tutorial, we discussed two approaches to set the inward offsets of the image with JavaScript. The first approach is to use the borderImageSlice property and the other is to use the setProperty() method.
136 Views
