函数传参改变div属性

最新推荐文章于 2022-09-06 15:15:20 发布

半夜三更看球

最新推荐文章于 2022-09-06 15:15:20 发布

阅读量358

点赞数

分类专栏：原生js Demo

本文链接：https://blog.csdn.net/weixin_44723507/article/details/89416417

版权

原生js Demo 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<!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>函数传参改变div属性</title>
    <style>
        .wrapper {
            width: 500px;
            height: 500px;
            margin: 0 auto;
        }

        .box {
            width: 199px;
            height: 199px;
            border: 1px black solid;
            position: relative;
            top: 20px;
            left: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <p>属性名:<input type="text" value="background"></p>
        <p>属性值:<input type="text" value="blue"></p>
        <button>确定</button>
        <button>重置</button>

        <div class="box">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
    </div>

    <script>
        var oDiv = document.getElementsByTagName("div")[1];
        var oInput = document.getElementsByTagName("input");
        var oBtn = document.getElementsByTagName("button");

        var changeStyle = function (elem, name, value) {
            elem.style[name] = value;
        }

        oBtn[0].onclick = function () {
            changeStyle(oDiv, oInput[0].value, oInput[1].value);
        }
        oBtn[1].onclick = function () {
            oDiv.removeAttribute("style");
        }



    </script>
</body>

</html>