js 函数传参改变div属性

最新推荐文章于 2022-11-05 13:54:23 发布

kelokole

最新推荐文章于 2022-11-05 13:54:23 发布

阅读量738

点赞数

本文链接：https://blog.csdn.net/qq_44254672/article/details/91842355

版权

<!DOCTYPE html>
<html>
    <head>
        <title>函数传参改变Div属性的值</title>
        <style type="text/css">
            *{ margin: 0px; padding: 0px; text-align: center; }
            .bpp3{ margin: 20px 400px; width: 250px; height: 280px; position: relative; }
            .bpp3 input{ width: 150px; height: 30px; margin: 5px; }
            .bpp3 button{ width: 55px; height: 30px; margin: 20px; margin-top: 5px; float: right; }
            #Div{ width: 150px; height: 150px; background: black; position: absolute; bottom: 0px; left: 80px; color: #ffffff; font:12px/1.5 Tahoma; }
        </style>
    </head>
    <body>
        <div class="bpp3">
            <label>
                属性名：<input type="text" value="background" /><br>
                属性值：<input type="text" value="red" /><br>
            </label>
            <button>重置</button>
            <button>确定</button>
            <div id="Div">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
        </div>

        <script type="text/javascript">
            // 传参函数
            var changestyle = function(element, attribute, value){
                element.style[attribute] = value;
            }
            window.onload = function(){
                // 获取元素
                var Iname = document.getElementsByTagName("label")[0].getElementsByTagName("input");
                var Ibtn = document.getElementsByClassName("bpp3")[0].getElementsByTagName("button");
                var Div = document.getElementById("Div");
                // 按钮的点击事件
                Ibtn[1].onclick = function(){
                    changestyle(Div, Iname[0].value, Iname[1].value);
                }
                Ibtn[0].onclick = function(){
                    Div.removeAttribute("style");
                }
            }
            
        </script>
    </body>
</html>

效果图：