js:自定义属性(获取、设置、移除)

摘要:
1.获取属性(1)元素值的方法。属性input1。onblur=function(){document.getElementById(“input1”).value=“losing focus”;}此方法只能获取标记(2)getElementBy中已存在的属性

1、获取属性的值的方法

(1)element.属性

    <body>
        <input id="input1" value="未失去焦點"></input>
        <script>
  
                input1.onblur=function(){
                    document.getElementById("input1").value="失去焦点";
                }        
        </script>
    </body>

js:自定义属性(获取、设置、移除)第1张

 js:自定义属性(获取、设置、移除)第2张

该种方式只能够获取到标签已经存在的属性

(2) getElementById

获取标签存在的属性的值:

<input id="input1" value="未失去焦點"></input>
        <script>
                input1.onblur=function(){
                    console.log(document.getElementById("input1").getAttribute("value"));
                }        
        </script>

js:自定义属性(获取、设置、移除)第3张

获取自定义属性:

    <body>
        <input id="input1" value="未失去焦點" index="123"></input>
        <script>
                input1.onblur=function(){
                    console.log(document.getElementById("input1").getAttribute("index"));
                }        
        </script>
    </body>

getElementById不仅能够获取到元素自身的属性还能够获取自定义的属性

(3)H5新增的获取自定义属性的方法(ie10以上)

    <body>
        <input id="input1" value="未失去焦點" data-index = "123" data-time="2020年7月25日08:27:20"></input>
        <script>
                input1.onblur=function(){
                    console.log(document.getElementById("input1").dataset);
                    console.log(document.getElementById("input1").dataset.index);
                }        
        </script>
    </body>

js:自定义属性(获取、设置、移除)第4张

 dataset是一个集合里面存储的是所有以data开头的自定义属性

<input id="input1" value="未失去焦點" data-index = "123" data-time-now="2020年7月25日08:27:20"></input>
        <script>
                input1.onblur=function(){
                    console.log(document.getElementById("input1").dataset.timeNow);
                }        
        </script>

属性名有多个-相连接的时候,获取值的时候要使用驼峰命名法

2、设置属性值

(1)设置内置属性

    <body>
        <input id="input1" value="未失去焦點" index="123"></input>
        <script>
                input1.onblur=function(){
                    document.getElementById("input1").value="早上好";
                }        
        </script>
    </body>

失去焦点时触发函数,属性的值发生变化:

js:自定义属性(获取、设置、移除)第5张

 (2)设置自定义属性的值

    <body>
        <input id="input1" value="未失去焦點" index="123"></input>
        <script>
                input1.onblur=function(){
                    document.getElementById("input1").setAttribute("index","早上好");
                    console.log(document.getElementById("input1").getAttribute("index"));
                }        
        </script>
    </body>

3、移除自定义属性

<body>
        <input id="input1" value="未失去焦點" index="123"></input>
        <script>
                input1.onblur=function(){
                    document.getElementById("input1").removeAttribute("index");
                }        
        </script>
    </body>

js:自定义属性(获取、设置、移除)第6张

总结:

为了区分自定义属性和本身的属性,如在书写自定义属性index的时候可以写作:data-index

免责声明:文章转载自《js:自定义属性(获取、设置、移除)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇swoole组件----mysql查询,插入数据VS 插件下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

关于iframe中的js跨站

iframe中的js跨站的问题很是头痛,关于js跨站的方法可以参考 wujiajun1020。 这里结合我遇到的情况讲讲我的处理方法,我的情况是要在各个站点中调用其中某一个站点的登录页,来达到统一登录的目的(这里详述单点登录了)。在不同站点下调用某一个站点的登录页面,想了想还是用iframe吧,iframe还是很强大的。于是用js写了一个遮罩效果的dial...

【JS笔记】5.3 Date类型

Date类型存储的信息:从UTC(1970年1月1日0时)开始经过的毫秒数 创建Date对象: 使用构造函数Date() 表示当前毫秒数的Date对象:var now = new Date();//不用参数时默认为当前毫秒数 表示指定毫秒数的Date对象:var date1 = new Date(milliseconds); 获取milliseconds方...

纯js实现人脸识别眨眨眼张张嘴案例——index.html

<!DOCTYPE html> <html> <meta charset="GBK"> <style>#container { position:relative; } #canvas { position:ab...

关于浏览器对html, js,css的解析先后顺序的理解

1.首先要了解页面的结构(包含哪些元素?哪些计算机语言能够在页面中运行 ) (1)html          不仅可以包含文字,还可以包含图片、链接,甚至音乐、程序等非文字元素的标记语言          (展示给用户,不能太单调,css) (2)css          是一种用来表现HTML的计算机语言,能使HTML页面变得更加美观        ...

JS的继承

对于继承的实际运用还没有很好的理解,这里就先说说JS中继承的实现。 类式继承 作为基于原型的语言,JS也可以模仿类式继承。首先声明一个父类 function Person(name, age) { this.name = name; this.age = age; } Person.prototype.sayHello = function...

JS与CSS阻止元素被选中及清除选中的方法总结

有时候,我们希望阻止用户选中我们指定区域的文字或内容。 举个栗子,有时候用户在一个区域执行频繁的点击操作,一不小心傲娇地点多了,就会选中当前区域的内容。 再举个栗子,制作轮播组件的时候,点击下一页,若点击的快的话,浏览器会识别为双击。 双击的默认效果是选中整片区域,这时候轮播图组件就会被表示忧郁的蓝色幕布盖住,多忧桑啊~ 你看,这妹子多赞啊,可是你一紧张...