JS中设置或获取自定义方法setAttribute getAttribute attributes

用JS 实现切换

window.onload=function(){
                // 获取所有的A标签
                var btns=document.querySelectorAll(".box .title a");
                var forms=document.querySelectorAll(".box .text form");
                for(var i = 0;i<btns.length;i++){
                    btns[i].onclick=function(){
                        for(var j=0;j<btns.length;j++){
                            // 去除掉所有的类名
                            btns[j].className="";
                        }
                        // 设置类名的class为active
                        this.className="active";
                        // 对象.attributes   获取所有属性节点，返回一个数组（伪数组）
                        // attributes可以获取一个对象中的一个属性，并且做为对象来调用，注意在这里要使用"[]"
                        var idx =this.attributes["data-idx"].value;
                        for(var j=0;j<btns.length;j++){
                            forms[j].style.display="none";
                        }
                        forms[idx].style.display="block";
                    }
                }
            }

JS 弹窗

<script type="text/javascript">
            window.onload=function(){
                var btn=document.querySelector("button");
                btn.onclick=function(){
                    var box=document.querySelector(".box");
                    box.style.display="flex";
                }
                var close=document.querySelector(".close");
                close.onclick=function(){
                    var box=document.querySelector(".box");
                    box.style.display="none";
                }
            }
        </script>

 

1、setAttribute  方法添加指定的属性，并为其赋指定的值。属性可以是自定义的属性，如果这个指定的属性已经存在，则仅设置/更改值.

2、getAttribute   获取某个属性的值；返回值为string属性

注：attributename,value都是字符串类型

3. attributes;返回元素属性的 NamedNodeMap(返回所有属性的集合，如果通过该方法获取属性，obj.attributes['attr'])

注：Internet Explorer 8 以及更早的版本中，attributes 属性将返回元素所有可能的属性的集合，即会返回所有隐藏的属性

attributes中的属性可以通过数组的方式来获取对应的属性值

            var myAttr=document.getElementById("txtMsg").attributes["myAttr"].value;  //通过attributes属性
            var myAttr=document.getElementById("txtMsg").getAttribute("myAttr");   //通过getAttribute方法
            document.getElementById("txtMsg").setAttribute("myAttr","newValue");   //通过setAttribute方法设置