DOM属性及创建标签

                样式操作：
                    className
                    classList
                        classList.add
                        classList.remove
                        
                    <style>
                        .c1{
                            font-size:15px
                        }
                    </style>    
                    <div class='c1 c2'></div>
                    obj.style.font-size ='16px';
                属性操作:
                    obj.setAttribute('xxxx','liunx')#添加属性
                    obj.removeAttribute('value')#移除属性
                    obj.attributes#获取所有属性
                
                创建标签,并添加到HTML中：
                    a.字符串形式
                    b.对象的方式
                        document.createElement('input');

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" onclick="AddEle1();value='+'">
    <input type="button" onclick="AddEle2();value='+'">

    <div id="i1">
        <input type="text">
        <hr/>
    </div>

    <script>
        function AddEle1() {
            //创建一个标签
            //将标签添加到i1里面
            var tag= document.createElement('input');
            tag.setAttribute('type','text')
            tag.style.fontSize='22px'
            tag.style.color='red'
            // document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
            document.getElementById('i1').appendChild(tag);

        }
        function AddEle2() {
            //创建一个标签
            //将标签添加到i1里面
            var tag="<input type='text'/><hr/>";
　　　　　　　//注意 第一个参数只能是 beforeEnd afterBegin beforeBegin afterEnd
            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
        }
    </script>
</body>
</html>

 

posted @ 2021-01-15 16:50  安好_世界  阅读(84)  评论(0)  编辑  收藏  举报