2.5函数传参，改变属性及属性值_传参的形式改变元素的属性值-CSDN博客

本文链接：https://blog.csdn.net/uncle_Huang/article/details/103420471

<!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>changdiv2</title>
    <style>
        .top{
            text-align: center;
        }
        .box{
            width:200px;
            height: 200px;
            background-color: #000;
            margin: 0 auto;
            color: #fff;
            padding: 10px;
            font-size: 13px;
            margin-top:10px;
        }
    </style>
</head>

<body>
    <div class="top">
        属性名：<input type="text" value="background" class="attr"><br>
        属性值：<input type="text" value='black' class="val"><br>
        <button class="confirm">确定</button><button class="reset">重置</button>
    </div>
    <div class="box">在上方的输入框中输入"属性名"及"属性值"，点击确定按钮查看效果</div>
    <script>
        var changeStyle = function (elem, attr, value)
        {
	       elem.style[attr] = value
        }
        window.onload=function(){
            var oBox=document.getElementsByClassName('box')[0]
           document.getElementsByClassName('confirm')[0].onclick=function(){
               changeStyle(oBox,document.getElementsByClassName('attr')[0].value,document.getElementsByClassName('val')[0].value)
           }
           document.getElementsByClassName('reset')[0].onclick=function(){
               oBox.removeAttribute('style')
           }
        }
    </script>
</body>
</html>