집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트에서 div 테두리를 설정하는 방법

자바스크립트에서 div 테두리를 설정하는 방법

青灯夜游원래의: 2021-06-30 17:19:247440검색

JavaScript에서 div 테두리를 설정하는 방법: 먼저 "document.getElementById("ID value")"를 사용하여 지정된 div 태그 개체를 가져온 다음 "object.style.border="border width style color"" 문을 사용합니다. div 테두리를 설정합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript로 div 테두리를 설정하는 단계:

div 요소 개체 가져오기
스타일 개체의 테두리 속성을 사용하여 테두리를 설정

border 속성은 모든 테두리 속성을 하나로 설정합니다. 성명.

구문:

Object.style.border=borderWidth borderStyle borderColor

관련 추천 :

value	Description	value
borderWidth	테두리 너비를 설정합니다.	thin medium thick length
borderStyle	테두리 스타일을 설정합니다. ㅋㅋㅋ	borderColor 테두리 색상을 설정합니다. color-name color-rgb color-hex transparent 예: <!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> 렌더링:
	javascript 학습 튜토리얼	]

value

Description

value

borderWidth

테두리 너비를 설정합니다.

thin
medium
thick
length

borderStyle

테두리 스타일을 설정합니다. ㅋㅋㅋ

테두리 색상을 설정합니다.
color-name
color-rgb
color-hex
transparent
예:

<!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>

렌더링:

javascript 학습 튜토리얼

]

위 내용은 자바스크립트에서 div 테두리를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript 对象 border

성명：

이전 기사：자바스크립트로 HTML 내용을 수정하는 방법다음 기사：자바스크립트로 HTML 내용을 수정하는 방법