在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效

稿源：互联网 2018-09-03 20:04:23 点击： 7597 撤稿纠错

dome演示在线即时显示CSS样式

以下讨论的是和CSS样式 DIV相关的在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</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>

关于在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090394688.shtml方便下次再访问哦。

·上一篇： 公司新年网页抽奖程序数字抽奖游戏JS特效
·下一篇： 一款在线web网页版计算器JS代码程序源码

在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效

文章分类LIST >>返回首页

最新游戏

最新新闻

在线即时显示CSS样式 改变DIV颜色宽高度大小实时预览特效

文章分类LIST >>返回首页

最新游戏

最新新闻

在线即时显示CSS样式改变DIV颜色宽高度大小实时预览特效