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毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!

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

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Could A New Linux Base For Tablets/Smartphones Succeed In 2017?
    使用libhybris,glibc和bionic共存时的TLS冲突的问题
    6 Open Source Mobile OS Alternatives To Android in 2018
    Using MultiROM
    GPU drivers are written by the GPU IP vendors and they only provide Android drivers
    Jolla Brings Wayland Atop Android GPU Drivers
    How to Use Libhybris and Android GPU Libraries with Mer (Linux) on the Cubieboard
    闲聊Libhybris
    【ARM-Linux开发】wayland和weston的介绍
    Wayland and X.org problem : Why not following the Android Solution ?
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15354552.html
Copyright © 2011-2022 走看看