css在线改变实时生效js插件_其他特效_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

css在线改变实时生效js插件

来源：未知作者：大小：大小： 0KB 点击次数：发布时间：2017-06-15 19:52:24 去下载去预览

特效介绍

css在线改变实时生效js插件

一款可以在线更改css，就能及时生效的js插件。运行下面的代码可以查看效果：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js在线更改css样式 - 我爱模板网www.5imoban.net</title> <style type="text/css"> body { background: #00b38a center no-repeat; overflow: hidden; color: white; font-family: "Microsoft YaHei";} a { text-decoration: none; } #container { position:relative; width: 500px; height: 600px; background: white; margin: 0 auto;} #container .btn { display: block; height: 90px; width: 100%; background: #2D659F; color: white; font-size: 20px; line-height: 90px; text-align: center; font-weight: bold; } #container #box { width: 150px; height: 150px; background: #00A881; border:2px solid #272822; position: absolute; top: 50%;left:50%; margin-top: -75px; margin-left: -75px; z-index: 99999;} #change { position: absolute; top: 90px; left: 510px; display: block; width: 150px; height:370px; background: white; } #change div { padding:10px;} p { color: #000;} #change button { display:inline-block; width: 40px; height: 40px; background: #F5F6F7; border:1px solid #D8D8D8; color: #00A881;} #change button#red { background: red;} #change button#yellow {background: yellow;} #change button#blue {background: blue;} </style> <script> window.onload = function (){ var bt1= document.getElementById('red'); var bt2= document.getElementById('yellow'); var bt3= document.getElementById('blue'); var box = document.getElementById('box'); bt1.onclick = function (){ box.style.background = "red"; }; bt2.onclick = function (){ box.style.background = "yellow"; }; bt3.onclick = function (){ box.style.background = "blue"; }; var wd_size1 = document.getElementById('wd1'); var wd_size2 = document.getElementById('wd2'); var wd_size3 = document.getElementById('wd3'); wd_size1.onclick = function(){ box.style.width = "100px"; box.style.marginLeft="-50px"; }; wd_size2.onclick = function(){ box.style.width = "200px"; box.style.marginLeft="-100px"; }; wd_size3.onclick = function(){ box.style.width = "300px"; box.style.marginLeft="-150px"; }; var hg_size1 = document.getElementById('hg1'); var hg_size2 = document.getElementById('hg2'); var hg_size3 = document.getElementById('hg3'); hg_size1.onclick = function(){ box.style.height = "100px"; box.style.marginTop="-50px"; }; hg_size2.onclick = function(){ box.style.height = "200px"; box.style.marginTop="-100px"; }; hg_size3.onclick = function(){ box.style.height = "300px"; box.style.marginTop="-150px"; }; }; </script> </head> <body> <div id="container"> <a href="" class="btn">点击设置样式</a> <div id="box"></div> <div id="change"> <div class="bg"> <p>选择背景</p> <button type="button" id="red">红</button> <button type="button" id="yellow">黄</button> <button type="button" id="blue">蓝</button> </div> <div class="wd"> <p>选择宽度</p> <button id="wd1">100</button> <button id="wd2">200</button> <button id="wd3">300</button> </div> <div class="hg"> <p>选择高度</p> <button id="hg1">100</button> <button id="hg2">200</button> <button id="hg3">300</button> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

使用方法

复制上面的运行代码，在本地新建html页面，粘贴上即可使用。