javascript - 用纯js改变 parent 的风格

Question

我有一个开关按钮。代码如下:

<div class="switch-radiobutton" data-style="rounded" data-label="on-off">
   <input type="radio" id="rb-1" name="rb" checked>
   <label class="label" for="rb-1"></label>
</div>

<div class="switch-radiobutton" data-style="rounded" data-label="on-off">
    <input type="radio" id="rb-2" name="rb">
    <label class="label" for="rb-2"></label>
</div>

CSS:

/* BASIC SWITCH STYLE  */

.switch-radiobutton [type='radio'] {
    visibility: hidden;
}

.switch-radiobutton {
    display: inline-block;
    position: relative;
    height: 50px;
    line-height: 50px;
    width: 100px;
    margin-bottom: 30px;

    background: red;
    z-index: 1;
}

/* LABEL STYLE  */

.switch-radiobutton:before,
.switch-radiobutton:after {
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    text-align: center;
    text-transform: uppercase;
    font-size: 20px;
    z-index: 2;
    color: #fff;
}

.switch-radiobutton:before {
    left: 0;
}

.switch-radiobutton:after {
    right: 0;
}

.switch-radiobutton {

    &:before {
        content: 'on';
    }

    &:after {
        content: 'off';
    } 
}

/* SWITCH OFF */

.switch-checkbox label,
.switch-radiobutton label {
    position: absolute;
    display: block;
    top: 4px;
    left: 4px;
    height: 42px;
    width: 42px;

    background: #fff;
    cursor: pointer;
    transition: all .4s ease-in-out;
    z-index: 3;
}

/* SWITCH ON */

.switch-checkbox [type='checkbox']:checked + label,
.switch-radiobutton [type='radio']:checked + label {
    transform: translate3d(50px,0,0);
}

/* SWITCH ROUNDED */

.switch-radiobutton[data-style='rounded'],
.switch-radiobutton[data-style='rounded'] label {
    border-radius: 50px;
}

/* SWITCH SQUARE */

.switch-checkbox[data-style='square'],
.switch-checkbox[data-style='square'] label {
     border-radius: 5px;
}

如何在使用 css 或纯 js 检查的输入上更改父元素(.switch-radiobutton)的背景？没有 jQuery。据我所知，我无法使用 CSS 更改父元素。

Answer 1

使用按钮的 onchange 调用函数并将 this 作为参数传递。

在函数中，使用.parentNode 获取作为参数传递的节点的父节点。

然后你可以使用.style.backgroundColor()来改变背景。