设计页面布局5个按钮和一个正方形，使用js实现正方形形状的改变 页面如图

Question

 

Answer 1

帮助到你能点个采纳吗，谢谢~~

<div style="text-align:center">
    <input type="button" onclick="setStyle('width','200px')" value="变宽" />
    <input type="button" onclick="setStyle('height','260px')" value="变高" />
    <input type="button" onclick="setStyle('background-color','#ff0000')" value="变色" />
    <input type="button" onclick="setStyle('display','none')" value="隐藏" />
    <input type="button" onclick="setStyle('reset')" value="重置" />
    <br /><br />
    <div id="div1" style="background: #000; width: 150px; height: 150px; display: inline-block ">

    </div>
</div>
<script>
    var div1 = document.getElementById('div1');
    function setStyle(attr, value) {
        if (attr == 'reset') div1.style.cssText = 'background:#000;width:150px;height:150px;display:inline-block';
        else {
            div1.style[attr] = value;
        }
    }
</script>