利用JS实现图形形状与背景颜色的变化_neovis.js 更改样式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45457515/article/details/98943246

这篇博客介绍了如何使用JavaScript来实现图形形状和背景颜色的动态变化，通过点击按钮即可切换不同的图形样式和颜色效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天使用JS简单实现如下功能
在这里插入图片描述

当点击按钮时可以选择改变图形的形状与背景颜色
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> 
        *{ margin: 0; padding: 0;}
        .box{ width: 500px; height: 500px; border: 1px solid #000; position: relative;}
        #demo{ width:300px; height: 100px; border: 1px solid #000; margin: 20px}
        #btn{ position:absolute; right: 20px; top: 20px}
        #bg{ width: 500px; height: 500px; background: rgba(0,0,0,.5); position:absolute;
        left: 0; top: 0;display: none}
        .caozuo{ background: #fff; width: 180px; height: 300px; float:right;         margin: 30px 20px 0 0; }
         .caozuo span{ border: 1px solid #000; margin: 5px; display: inline-block}
    </style>
</head>
<body>
    <div class="box">
        <div id="demo"></div>
        <button id="btn">点击设置样式</button>
        <div id="bg">
            <div class="caozuo">
                <h2>大小</h2>
                <span id='dx1'>300*300</span>
                <span id='dx2'>300*200</span>
                <span id='dx3'>200*300</span>
                <span id='dx4'>100*300</span>
                <h2>颜色</h2>
                <span id="col1">#ff0000</span>
                <span id="col2">#00ff00</span>
                <span id="col3">#00ffff</span>
                <span id="col4">#0000ff</span><br>
                <button id="qd">确定</button>
                <button id="qx">取消</button>
            </div>
        </div>
    </div>
    <script>
        var btn = document.getElementById('btn');
        var demo = document.getElementById('demo');
        var bg = document.getElementById('bg');
        var dx1 = document.getElementById('dx1');
        var dx2 = document.getElementById('dx2');
        var dx3 = document.getElementById('dx3');
        var dx4 = document.getElementById('dx4');
        var col1 = document.getElementById('col1');
        var col2 = document.getElementById('col2');
        var col3 = document.getElementById('col3');
        var col4 = document.getElementById('col4');
        var qd = document.getElementById('qd');
        var qx = document.getElementById('qx');
        btn.onclick = function(){
            bg.style.display = 'block'
        }
        qd.onclick = function(){
            bg.style.display = 'none'
        }
        qx.onclick = function(){
            bg.style.display = 'none'
            demo.style.background = '#fff'
            demo.style.width='300px';
            demo.style.height='100px';
        }
        dx1.onmouseover = function(){
            demo.style.width='300px';
            demo.style.height='300px';
        }
        dx2.onmouseover = function(){
            demo.style.width='300px';
            demo.style.height='200px';
        }
        dx3.onmouseover = function(){
            demo.style.width='200px';
            demo.style.height='300px';
        }
        dx4.onmouseover = function(){
            demo.style.width='100px';
            demo.style.height='300px';
        }
        col1.onmouseover = function(){
            demo.style.background = '#f00'
        }
        col2.onmouseover = function(){
            demo.style.background = '#00f'
        }
        col3.onmouseover = function(){
            demo.style.background = '#0ff'
        }
        col4.onmouseover = function(){
            demo.style.background = '#0f0'
        }
    </script>
</body>
</html>