js实现控制css样式

来源：互联网发布：维生素vb的作用及功能编辑：程序博客网时间：2024/05/16 18:09

主要使用函数传值，改变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里面，一遍的属性样式都可以使用。可以试试

0 0