js实现控制css样式

最新推荐文章于 2023-05-10 01:09:09 发布

因火成烟

最新推荐文章于 2023-05-10 01:09:09 发布

阅读量584

点赞数

文章标签： css js html web前端

本文链接：https://blog.csdn.net/TheFoma/article/details/44905813

版权

主要使用函数传值，改变div样式.

先找到js需要的元素，input，button，和下面需要改变的div的id;

新建一个函数，用来改变div的style；

这里需要注意有个style数组，看代码就清楚；

还使用了一个dom操作

oDiv.removeAttribute("style");

这使得div移除现有样式，恢复原来的样式；

完整js代码

var obtn = document.getElementsByTagName("button");
var oIn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
function changeStyle(e,name,value){
	e.style[name] = value;
}
obtn[0].onclick =function (){
		changeStyle(oDiv,oIn[0].value,oIn[1].value);
}
obtn[1].onclick = function(){
	oDiv.removeAttribute("style");
}

需要注意的是在实参那里需要写上value属性值；我刚开始写的时候没有写，调试好几次才发现。

三个参数，第一个是用来确定某一个div,有其他的div也可以改变

看看css代码：

body,p{
	margin: 0;
	padding: 0;
}
body{
	color: #333;
	padding-top: 10px;
}
#outer{
	width: 300px;
	margin: 0 auto;
}
p{
	margin-bottom: 10px;
}
button{
	margin-right: 60px;
}
label{
	width: 5em;
	display: inline-block;
	text-align: right;
}
input{
	padding: 3px;
	width: 180px;
	border: 1px solid #ccc;
}
#div1{
	color: #fff;
	width: 180px;
	height: 180px;
	background: #000;
	margin: 0 auto;
	padding: 10px;
}

在label那里，有个width:2em;应该是2个字符的意思；可以这么理解；

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="d.css">
</head>

<body>
	<div id="outer">
		<p>
			<label>属性名：</label>
			<input type="text" value="background">
		</p>
		<p>
			<label>属性值：</label>
			<input type="text" value="blue">
		</p>
		<p>
			<label></label>
			<button>确定</button>
			<button>重启</button>
		</p>
	</div>
	<div id="div1">
		在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。
	</div>
	<script src="d.js"></script>
</body>

</html>

在第三个p那里，有label存在是为了让页面整洁

在这个dome里面，一遍的属性样式都可以使用。可以试试