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

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

    支付宝
    微信
    本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    状压DP【p1879】[USACO06NOV]玉米田Corn Fields
    Tarjan缩点+Spfa最长路【p3627】[APIO2009] 抢掠计划
    Tarjan缩点【p1726】上白泽慧音
    分层图【p4822】[BJWC2012]冻结
    Tarjan缩点+LCA【p2783】有机化学之神偶尔会做作弊
    线段树【p1607】[USACO09FEB]庙会班车Fair Shuttle
    better-scroll踩坑合集
    在浏览器上安装 Vue Devtools工具
    无法执行vue初始化命令
    vue-cli创建第一个项目(用git bash解决上下键移动选择问题)
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/15354552.html
Copyright © 2011-2022 走看看