点击按钮改变CSS样式

yqxbc 发布时间：08-27 来源：一起学编程浏览：14次

　　代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n<html xmlns="http://www.w3.org/1999/xhtml">\n<head>\n<title>点击按钮改变CSS样式</title>\n<meta http-equiv="content-type" content="text/html;charset=gb2312">\n<style type="text/css">\n* {\n padding:0px;\n margin:0px;\n}\n.box {\n width:300px;\n height:300px;\n border:1px solid #CBC4F7;\n font-size:13px;\n margin:100px auto;\n}\n.pWidth {\n width:400px;\n}\n.pHeight {\n height:400px;\n}\n.pBgColor {\n background-color:#DCF3B1;\n}\np {\n padding:15px 5px;\n}\nul li {\n list-style:none;\n width:140px;\n height:32px;\n text-align:center;\n line-height:32px;\n background-color:#C4EA84;\n border:1px solid #9BEA75;\n margin:0px auto;\n margin-bottom:10px;\n cursor:pointer;\n background-image:-webkit-linear-gradient(top, #C4EA84, #53AC28);\n background-image:-moz-linear-gradient(top, #C4EA84, #53AC28);\n background-image:-o-linear-gradient(top, #C4EA84, #53AC28);\n -webkit-border-radius:4px;\n -moz-border-radius:4px;\n -o-border-radius:4px;\n}\n</style>\n<script type="text/javascript">\nwindow.onload=function(){\n var btn1 = document.getElementById("btn1");\n var btn2 = document.getElementById("btn2");\n var btn3 = document.getElementById("btn3");\n funClick = function(btnID,changeClass){\n  btnID.onclick = function() {\n   var boxClass = btnID.parentNode.parentNode.className;\n   var ifClass = boxClass.indexOf(changeClass);\n   if(ifClass < 0){\n    boxClass = boxClass + " " + changeClass;\n   }else {\n    boxClass = boxClass.replace(changeClass,"");\n   }\n   btnID.parentNode.parentNode.className = boxClass;\n  }\n }\n funClick(btn1,"pWidth");\n funClick(btn2,"pHeight");\n funClick(btn3,"pBgColor");\n}\n</script>\n</head>\n<body>\n<p class="box">\n <p>这里是少许文本</p>\n <ul>\n  <li id="btn1">点我调整宽度</li>\n  <li id="btn2">点我调整高度</li>\n  <li id="btn3">点我调整背景颜色</li>\n </ul>\n</p>\n</body>\n</html>

如果你有好的win10资讯或者win10教程，以及win10相关的问题想要获得win10系统下载的关注与报道。
欢迎加入发送邮件到657025171#qq.com(#替换为@)。期待你的好消息！

文章目录