JavaScript - 操作元素 - 获取自定义属性值

最新推荐文章于 2024-04-25 14:36:18 发布

学习中的小菜鸟.

最新推荐文章于 2024-04-25 14:36:18 发布

阅读量7.3k

点赞数 3

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/qq_33962481/article/details/118081357

版权

JavaScript 专栏收录该内容

66 篇文章 1 订阅

订阅专栏

文章目录

一、定义属性的操作
选项卡案例
二、H5自定义属性
- 设置H5自定义属性
- 获取H5自定义属性

一、定义属性的操作

1.获取属性值

element.属性; 获取属性值. : 获取内置属性值 (元素本身自带的属性)
element.getAttribute(‘属性’); : 主要获得自定义的属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);  // div
        console.log(div.getAttribute('index'));  // 1
    </script>
</body>

</html>

2.设置元素属性值

element.属性 = 值; 修改元素属性值
element.setAttribute('属性', '值'); 修改自定义属性值.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.id);  // div
        console.log(div.getAttribute('index'));  // 1
        div.id = 'dddd'
        console.log(div.id);  // dddd
        div.setAttribute('index', '2');
        console.log(div.getAttribute('index'));  // 2
    </script>
</body>

</html>

3. 移除属性

element.removeAttribute('属性');

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div" index="1"></div>
    <script>
        var div = document.querySelector('div');
        div.removeAttribute('index');
        console.log(div.getAttribute('index'));  // null
    </script>
</body>

</html>

选项卡案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            color: black;
        }

        li {
            list-style: none;
        }

        .ETab {
            position: relative;
            width: 990px;
        }

        .box {
            width: 100%;
            height: 50px;
            font-size: 14px;
            /* background-color: #ccc; */
            border-bottom: 1px solid red;
            overflow: hidden;
            margin-bottom: 50px;
        }

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

        .box ul li {
            float: left;
            height: 50px;
            text-align: center;
            padding: 0px 25px;
            line-height: 50px;
        }

        .boxs {
            position: absolute;
            font-size: 12px;
        }

        .box1 ul li {
            width: 50%;
            padding-left: 42px;
        }

        .box ul a:hover {
            color: red;
        }

        .box1 {
            padding-top: 20px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .box2 ul li {
            float: left;
            width: 200px;
            padding-left: 42px;
            line-height: 20px;
        }

        .boxs1 {
            position: absolute;
        }

        .item {
            display: none;
        }
    </style>
</head>

<body>
    <div class="ETab">
        <div class="box">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item boxs" style="display: block;">
                <div class="box1">
                    <ul class="li1">
                        <li>品牌: Apple</li>
                    </ul>
                </div>
                <div class="box2">
                    <ul>
                        <li>商品名称：AppleiPhone 12</li>
                        <li>商品编号：100016034400</li>
                        <li>商品毛重：350.00g</li>
                        <li>CPU型号：其他</li>
                        <li>运行内存：其他</li>
                        <li>机身存储：128GB</li>
                        <li>摄像头数量：后置双摄</li>
                        <li>后摄主摄像素：1200万像素</li>
                        <li>前摄主摄像素：1200万像素</li>
                        <li>屏幕比例：其他</li>
                        <li>分辨率：其他</li>
                        <li>屏幕前摄组合：其他</li>
                        <li>操作系统：iOS(Apple)</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                规格与包装
            </div>
            <div class="item">
                售后保障
            </div>
            <div class="item">
                商品评价
            </div>
        </div>
    </div>
    <script>
        // 点击变化背景色
        var boxli = document.querySelectorAll('.box ul li');
        var items = document.querySelectorAll('.tab_con .item');
        for (var i = 0; i < boxli.length; i++) {
            boxli[i].setAttribute('index', i);
            boxli[i].onclick = function () {
                for (var i = 0; i < boxli.length; i++) {
                    if (i == 0) {
                        boxli[i].className = 'boxs';
                    }
                    boxli[i].className = '';
                }
                this.className = 'current';
                // 点击切换内容
                for (var i = 0; i < items.length; i++) {
                    items[i].style = 'display: none;';
                }

                var index = this.getAttribute('index');
                items[index].style = 'display: block;';
            }
        }
    </script>
</body>

</html>

二、H5自定义属性

设置H5自定义属性

H5规定自定义属性data- 开头作为属性名并赋值.

比如 : <div data-index="1"></div>

获取H5自定义属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div data-index="1"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index'));  // 1
        // h5新增获取自定义属性
        console.log(div.dataset.index);  // 1
        console.log(div.dataset['index']); // 1
    </script>
</body>

</html>