- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
How to set all the outline properties in one declaration with JavaScript?
To set outline properties, use the outline property. It allows you to set the color, style, and offset of the outline.
Example
You can try to run the following code to set all the outline properties in one declaration with JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
#box {
width: 450px;
background-color: orange;
border: 3px solid red;
}
</style>
</head>
<body>
<p>Click below to add Outline.</p>
<div id="box">
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
<p>This is a div. This is a div. This is a div. This is a div. This is a div.</p>
</div>
<br>
<button type="button" onclick="display()">Set Outline</button>
<br>
<script>
function display() {
document.getElementById("box").style.outline = "thick solid #5F5F5F";
}
</script>
</body>
</html>
- Related Articles
- How to set all outline properties in a single declaration with JavaScript?
- How to set all the background properties in one declaration with JavaScript DOM?
- How to set all the border left properties in one declaration with JavaScript?
- How to set all the border right properties in one declaration with JavaScript?
- How to set all the border top properties in one declaration with JavaScript?
- How to set all the border bottom properties in one declaration in JavaScript DOM?
- Set all the top border properties in one declaration using CSS
- How to set the CSS margin properties in one declaration?
- How to set listStyleImage, listStylePosition, and listStyleType in one declaration with JavaScript?
- How to set outline color with JavaScript?
- How to set border width, border style, and border color in one declaration with JavaScript?
- How to set fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily in one declaration with JavaScript?
- Set all the background image properties in one section with CSS
- How to set all the four border radius properties at once with JavaScript?
- How to set the four transition properties with JavaScript?
Advertisements