【编程题】编写函数实现点击change按钮，为div元素添加红色双线边框。

最新推荐文章于 2021-09-18 20:06:50 发布

kuchabuku

最新推荐文章于 2021-09-18 20:06:50 发布

阅读量1.4w

点赞数 20

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_43479203/article/details/101390796

版权

前端专栏收录该内容

20 篇文章 1 订阅

订阅专栏

编写函数实现点击change按钮，为div元素添加红色双线边框。

先在<body>中编写一个<div>

<body>
	<div id="k">输入文字</div>
	<input type="button" value="change"/>
</body>

输出为
在这里插入图片描述
有了这些之后就可以在<head>内对<div>的css样式进行设置

<head>
		<meta charset="utf-8">
		<title>Change</title>
		<style type="text/css">
			div {
				width:auto;
				height:auto;
				margin-bottom: 20px;
				margin-left: 20px;
			     }
		</style>
</head>

有了css的样式之后就可以利用上面的按钮来控制<div>的样式了
最关键的就是<script>
yon

<script>
	function change() {
	document.getElementById("k").style.border="5px double red"	
			          }		
</script>

这里的这个 “k” 就是和前面<div>的 id 的 “k” 一样
以此来连接控制
最后在按钮处添加onclick来触发change这个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Change</title>
		<style type="text/css">
			div{
				width:auto ;
				height: auto;
				margin-bottom: 20px;
				margin-left: 20px;
			}
		</style>
		<script>
			function change() {
				document.getElementById("k").style.border="5px double red"
			                  }
		</script>
	</head>
	<body>
		<div id="k">输入文字</div>
		<input type="button" value="change" onclick="change()"/>
	</body>
</html>