zoukankan      html  css  js  c++  java
  • DOM属性操作

    <!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>Document</title>
    </head>
    <body>
        <div class="box" a="10" b=20 id="cont" title="这是一个div">
            <span>hello</span>
        </div>
    </body>
    <script>
        var obox = document.querySelector(".box");
        // 属性的操作:
        //     可见:看得见
        //         内置:系统提供,对象的操作方法;系列专属方法:get/set/remove Attribute()
                     console.log(obox.title) //这是一个div
                     obox.title = "1231321";//将title里面内容改为1231321
                    console.log(obox.title) //1231321
                     console.log(obox.className)
                     obox.className = "hahah"
    
                     console.log(obox.getAttribute("title"))//1231321
                     console.log(obox.getAttribute("class"))//hahah
    
        //         非内置:自定义的,系列专属方法:get/set/remove Attribute()
                     console.log(obox.getAttribute("a")) //10
                     obox.setAttribute("a","hello")    //将10换成了hello
                     console.log(obox.getAttribute("a")) //hello
                     obox.setAttribute("c","world")    //null,但是可以在元素中看到这个属性。搞不懂
                     obox.removeAttribute("a") //删除属性a
                     console.log(obox.getAttribute("a")) //null
                    // obox.removeAttribute("b")
                    // obox.removeAttribute("c")
    
        //     不可见:看不见
        //         内置:对象的操作
                     console.log(obox.innerHTML);    //可以解析标签 // <span>hello</span>
                     console.log(obox.innerText);    //不可以解析标签 //hello
    
                     console.log(obox.tagName);//DIV
    
                     console.log(obox.style)
    //                 所有的css属性
    //                 obox.style.width = "300px"
    //                 obox.style.height = "300px"
    //                 obox.style.background = "red"
    //                 obox.style.display = "none"
                     obox.style.cssText = "100px;height:100px;background:red;position:absolute;left:100px;"
    
        //         非内置:对象的操作
                    // 元素本身的类型,对象
                    // 对象,作为真正的对象操作
                     obox.abc = "hahahah"
                     console.log(obox.abc)
                    
    
    
    </script>
    </html>
  • 相关阅读:
    Activiti Model Editor组件
    Activiti 5.17 实体对象与类和数据库表的映射
    工作流入门链接
    揭秘jbpm流程引擎内核设计思想及构架
    比较Activiti中三种不同的表单及其应用
    Activiti源码分析
    Spring Security教程(5)---- 国际化配置及UserCache
    spring DelegatingFilterProxy管理过滤器
    Apache 处理svg工具包Apache(tm) Batik SVG Toolkit
    Binary Tree Right Side View
  • 原文地址:https://www.cnblogs.com/hy96/p/11401688.html
Copyright © 2011-2022 走看看