Home > Article > Web Front-end > How to set div border in javascript
How to set the div border in javascript: first use "document.getElementById("ID value")" to get the specified div tag object; then use the "object.style.border="border width style color"" statement to set div border.
The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.
Steps to set div border in javascript:
Get div element object
Use Style object The border property sets the border
The border property sets all border properties in one statement.
Syntax:
Object.style.border=borderWidth borderStyle borderColor
| Value | Description | Value |
|---|---|---|
| borderWidth | Set the width of the border. |
|
| borderStyle | Set the style of the border. |
|
| Set the color of the border. |
|
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div{
padding: 10px;
margin: 10px;
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("div1").style.border="thin dotted #FF0000";
}
</script>
</head>
<body>
<div id="div1">div元素，测试文本</div><br /><br />
<input type="button" onclick="changeBorder()" value="设置div边框" />
</body>
</html>Rendering:
##[Related recommendations:
The above is the detailed content of How to set div border in javascript. For more information, please follow other related articles on the PHP Chinese website!