zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    sql中触发器的使用
    sql中优化查询
    sql中case when语句的使用
    CSRF学习小结
    javascript正则表达式笔记
    elementUI单选框获取值
    elementUI内置过渡(折叠)
    elementUI内置缩放过渡(缩放)
    elementUi内置过渡动画(淡入)
    创建koa2项目
  • 原文地址:https://www.cnblogs.com/anhao-world/p/14282945.html
Copyright © 2011-2022 走看看