Question

我正在做一个chrome扩展程序，我希望能够保存和读取复选框的状态（格式看起来像一个开关），以影响程序的运行方式。

目前，我什至无法以任何方式访问该复选框，因为我以前从未以任何身份使用过javascript。测试我是否可以读取我所使用的当前状态 console.log（document.getElementById（“ activeSwitch”）。checked）或其一些变体。

这是我用来创建按钮的弹出HTML

<head>

    <title>test</title>

    <script src="popup.js"></script>

    <style>
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

            .switch input {
                opacity: 0;
                width: 0;
                height: 0;
            }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .4s;
            transition: .4s;
        }

            .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 4px;
                bottom: 4px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
            }

        input:checked + .slider {
            background-color: #2196F3;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #2196F3;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px);
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

        .slider.round {
            border-radius: 34px;
        }

            .slider.round:before {
                border-radius: 50%;
            }

    </style>

</head>

<body>

    <div>
        <p><b>test extension</b></p>

        <label id="activeSwitch" class="switch">

            <input type="checkbox" checked/>

            <span class="slider round"></span>

        </label>

    </div>

</body>

在Chrome扩展程序中存储和检索复选框的值

0 个答案: