js操作元素属性

2024-03-15 22:41:18

操作元素属性方法

(1)点语法获取元素属性
1.可以获取标准属性(主要)
2.可以获取点语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行外属性

//style属性是一个对象 存储的是元素的样式
console.log(box.style); 
//color属性在行外样式表中定义
console.log(box.style.color);    //空字符串
//无法获取行内自定义属性
console.log(box.index);   //undefined

补充：js设置元素属性，有‘-’的命名改成驼峰命名法
box.style.backgroundColor = “red”;

(2)Attribute获取元素属性
获取元素属性：元素.getAttribute(“属性名”)
设置元素属性：元素.setAttribute(“属性名”,属性值)

	// 1.可以获取标准属性
    // 2.可以获取行内自定义属性(主要操作行内自定义属性)
    // 3.无法获取行外属性
    // 4.无法获取点语法自定义属性

setAttribute()设置自定义属性名应以‘data-’开头

console.log(box.getAttribute("id"));
console.log(box.getAttribute("data-index"));

移除元素属性

box.removeAttribute("class");

Attribute案例：点击li标签，显示对应索引

<ul>
        <li>我第1个li标签</li>
        <li>我第2个li标签</li>
        <li>我第3个li标签</li>
        <li>我第4个li标签</li>
        <li>我第5个li标签</li>
    </ul>
    <script>
        //点击li标签，显示对应索引
        var lis = document.getElementsByTagName("li");

        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute("data-index",i+1);
            lis[i].onclick = function(){
                console.log(this.getAttribute("data-index"));
            }
        }
    </script>

选项卡案例

<head>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 500px;
            height: 30px;
            border: 1px solid #d0d0d0;
            border-bottom-color: red;
        }

        li {
            float: left;
            list-style: none;
            width: 100px;
            height: 30px;
            line-height: 30px;
            background-color: #f3f3f3;
            text-align: center;
            cursor: pointer;
        }

        .current {
            background-color: red;
            color: #fff;
        }

        .tabBox {
            width: 500px;
            margin: 30px auto;
        }

        .tabBox .tab-con .item {
            display: none;
            width: 500px;
            height: 300px;
            border: 1px solid #d0d0d0;
        }
    </style>
    </head>
<body>
    <div class="tabBox">
        <div class="tab-list">
            <ul>
                <li class="current">tab1</li>
                <li>tab2</li>
                <li>tab3</li>
                <li>tab4</li>
                <li>tab5</li>
            </ul>
        </div>
        <div class="tab-con">
            <div class="item" style="display: block;">tab1内容</div>
            <div class="item">tab2内容</div>
            <div class="item">tab3内容</div>
            <div class="item">tab4内容</div>
            <div class="item">tab5内容</div>
        </div>

    </div>

    <script>
        //获取元素
        var lis = document.querySelectorAll('.tab-list li');
        var tabLis = document.querySelectorAll('.tab-con .item');


        for (var i = 0; i < lis.length; i++) {
            lis[i].setAttribute("data-index", i);
            lis[i].onclick = function () {
                //选项切换
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = "";
                    tabLis[j].style.display = "none";
                }
                this.className = "current";
                var index = this.getAttribute("data-index");
                tabLis[index].style.display = "block";
            }
        }

    </script>
</body>

码农公寓

操作元素属性方法

相关文章