以编程方式更改触发器值
以编程方式更改触发器值
提问于 2015-12-14 16:52:22
我尝试过使用一些HTML/JS/CSS，但在如何动态地将flipswich更改到所需的状态方面遇到了困难。
这里的CSS https://proto.io/freebies/onoff/
function on() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:before";
}
function off() {
document.getElementById("innerswitchid").className = document.getElementById("innerswitchid").className + "onoffswitch-inner:after";
}.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #34A7C1;
color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #EEEEEE;
color: #999999;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
border: 2px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
}<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<span id="innerswitchid" class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<button onclick="on()">ON</button>
<button onclick="off()">OFF</button>
然而，这只会使触发器崩溃。如何使用js动态地将flipswich更改为所需的状态以更改组件的css？
Stack Overflow用户
回答已采纳
发布于 2015-12-14 18:05:00
将代码更新到以下内容：
HTML
<button id="js-btn--on">
ON
</button>
<button id="js-btn--off">
OFF
</button>JS
document.getElementById("js-btn--on").onclick = on;
document.getElementById("js-btn--off").onclick = off;
function on() {
document.getElementById('myonoffswitch').checked = true;
}
function off() {
document.getElementById('myonoffswitch').checked = false;
}您可以切换复选框，让CSS完成它想要完成的任务，而不是混合JS和CSS。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34272446
复制相关文章
相似问题
腾讯云开发者
