zoukankan      html  css  js  c++  java
  • js设置setAttribute、获取getAttribute、删除removeAttribute详细讲解

    setAttribute的理解

    所有主流浏览器均支持 setAttribute() 方法。
    element.setAttribute(keys,cont)
    
    keys==>必需(String类型)。您希望添加的属性的名称
    cont==>必需(String类型)。您希望添加的属性值 
    
    使用场景:可以设置元素的属性类型。
    <input value="3652" id="inputdemo" type="password">
    最初是密码框,我们使用这个方法可以设置为file类型
    同时它也可以设置自定义的属性值
    比如
    inputdemo.setAttribute("aa", "bb")
    

    getAttribute

    获取元素的属性值,如果存在返回对应的值
    不存在返回null
    <input value="3652" id="inputdemo" type="password">
    返回password哈
    console.log(input.getAttribute("type"));
    由于不存在aa这个属性,所以返回null
    console.log(input.getAttribute("aa"));
    

    removeAttribute

    删除属性值;
    如果移除不存在的属性值,并不会报错的哈。
    在echaers中就会使用removeAttribute这个方法
    主要是处理echarts第二次不会渲染
    

    通过案例了解这几个值

    <body>
        <div>
            <input value="3652" id="inputdemo" type="password">
            <input type="button" onClick="setClick()" value="点击设置">
            <input type="button" onClick="getClick()" value="点击查询">
            <input type="button" onClick="deleteClick()" value="点击删除">
        </div>
        <script>
            var input = document.getElementById('inputdemo');
            // setAttribute 设置input的type为file
            function setClick() {
                input.setAttribute("type", "file")
    
                //自定义属性值
                input.setAttribute("aa", "bb")
            }
    
            // getAttribute 输出input的type类型是password
            function getClick() {
                console.log(input.getAttribute("type"));
            }
    
            //removeAttribute 删除input的value值
            function deleteClick() {
                input.removeAttribute("value")
                input.removeAttribute("type")
                input.removeAttribute("ccc")
            }
        </script>
    
    作者:明月人倚楼
    出处:https://www.cnblogs.com/IwishIcould/

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!

    万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

    想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    2010年Ei收录的中国期刊
    做DSP最应该懂得157个问题
    【资料分享】 OpenCV精华收藏
    孙鑫VC学习笔记:多线程编程
    对Davinci DM6446的评价[转]
    TI首席科学家展望2020年处理器架构和DSP的发展
    37份计算机科学的经典文档
    VC学习笔记:状态栏
    【VC参考手册】MFC类库:4.21版和6.0版
    TI DSP入门学习
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15354552.html
Copyright © 2011-2022 走看看