您的位置是:网站首页>Javascript编程Javascript编程

怎么在javascript中给元素加边框

少儿编程网2021-12-29 15:14:36Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介javascript中给元素加边框的方法:1、使用“元素对象.style.border=宽度值样式值颜色值”语句;2、使用“元素对象.style.cssText=border:宽度值样式值颜色值”语句。本教程操作环境:windows7系统、javasc

javascript中给元素加边框的方法:1、使用“元素对象.style.border="宽度值 样式值 颜色值"”语句;2、使用“元素对象.style.cssText="border:宽度值 样式值 颜色值"”语句。KsU少儿编程网-https://www.pxcodes.com

KsU少儿编程网-https://www.pxcodes.com

本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。KsU少儿编程网-https://www.pxcodes.com

方法1:使用HTML DOM border 属性KsU少儿编程网-https://www.pxcodes.com

语法:Object.style.border=borderWidth borderStyle borderColor
KsU少儿编程网-https://www.pxcodes.com

示例:KsU少儿编程网-https://www.pxcodes.com

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" id="remove">
		<style>
			div{
				width: 80px;
				height: 30px;
				margin: 10px auto;
			}
		</style>
	</head>

	<body style="text-align:center;">
		<p style="font-size: 19px; font-weight: bold;">单击按钮给div元素添加边框</p>
		<div id="div">div元素</div>
		<button onClick="Fun()">点击这里</button>
		<script>
			var div = document.getElementById('div'); //获取div元素对象

			function Fun() {
				div.style.border="1px solid red"; //给div元素对象添加样式
			}
		</script>
	</body>
</html>

效果图:
KsU少儿编程网-https://www.pxcodes.com

KsU少儿编程网-https://www.pxcodes.com

2、使用cssText属性KsU少儿编程网-https://www.pxcodes.com

cssText 的本质就是设置 HTML 元素的 style 属性值。KsU少儿编程网-https://www.pxcodes.com

语法:Object.style.cssText="属性名:属性值";KsU少儿编程网-https://www.pxcodes.com

示例:KsU少儿编程网-https://www.pxcodes.com

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" id="remove">
		<style>
			div{
				width: 80px;
				height: 30px;
				margin: 10px auto;
			}
		</style>
	</head>

	<body style="text-align:center;">
		<p style="font-size: 19px; font-weight: bold;">单击按钮给div元素添加边框</p>
		<div id="div">div元素</div>
		<button onClick="Fun()">点击这里</button>
		<script>
			var div = document.getElementById('div'); //获取div元素对象

			function Fun() {
				div.style.cssText="border:1px dashed green"; //给div元素对象添加样式
			}
		</script>
	</body>
</html>

效果图:
KsU少儿编程网-https://www.pxcodes.com

KsU少儿编程网-https://www.pxcodes.com

【推荐学习:javascript高级教程】

以上就是怎么在javascript中给元素加边框的详细内容,更多请关注少儿编程网其它相关文章!KsU少儿编程网-https://www.pxcodes.com

来源:php中文网KsU少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

怎么在javascript中给元素加边框

      匿名评论
    • 评论
    人参与,条评论
    怎么在javascript中给元素加边框

微信公众号

免费视频教程

先知道