给div中动态添加节点并设置样式

Posted 2020-08-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了给div中动态添加节点并设置样式相关的知识，希望对你有一定的参考价值。

前端ios今天需要动态的在图片前面添加一个按钮

主要是在使用

　　bt.setAttribute("class","aaa");

可以对创建的节点使用setAttribute添加属性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style>
            .aaa{
                background-color: #333333;
                width: 200px;
                height: 200px;
            }
        </style>
        <script type="text/javascript">
            
            function f1(){
            var  con = document.getElementById(‘content‘);
            bt = document.createElement("button");
            bt.setAttribute("class","aaa");
            con.appendChild(bt);
            }
            
        </script>
        
    </head>
    <body>
        <div id="content" style="background-color: #FF0000;">
            Hello
        </div>
        <button onclick="f1()">测试</button>
    </body>
</html>

以上是关于给div中动态添加节点并设置样式的主要内容，如果未能解决你的问题，请参考以下文章

jquery给div添加样式_百度经验1一c

如何用JS给div添加样式

vue中动态添加div

如何通过 div.innerHTML 从 JSON 输入中动态设置数据样式？

js练习6 --- DOM文本节点的操作动态脚本动态样式操作表格