如何仅使用箭头键切换背景颜色的更改？
如何仅使用箭头键切换背景颜色的更改？
提问于 2021-09-23 21:29:17
我正在尝试使这个切换变得可访问，并且我已经成功地获得了切换开关的箭头键，但是我无法更改h1的背景颜色，这违背了可访问切换的目的。我在这里做错了什么？我尝试使用keydwon侦听器，我从箭头键获得了输入，但没有从输入获得准确的数据属性。
我的代码：- 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">
<link rel="stylesheet" href="css.css">
<title>Document</title>
</head>
<body>
<h2>Three Pos</h2>
<div class="container">
<input data-type="first" type="radio" id="first" name="toggle_option2">
<input data-type="second" type="radio" id="second" name="toggle_option2" checked>
<input data-type="third" type="radio" id="third" name="toggle_option2">
<label data-radio="first" for="first" class="radio one"><p>Lions</p></label>
<label data-radio="second" for="second" class="radio bottom two"><p>Tigers</p></label>
<label data-radio="third" for="third" class="radio three"><p>Bears</p></label>
<div class="bg"></div>
</div>
<script src="app.js"></script>
</body>
</html>CSS
*,
*::after,
*::before{
padding: 0;
box-sizing: border-box;
margin: 0;
}
:root{
--bg-one: hsl(0, 100%, 50%);
--bg-two: hsl(240, 100%, 50%);
--bg-three: hsl(39, 100%, 50%);
}
[color-scheme='first']{
--bg: var(--bg-one);
}
[color-scheme='second']{
--bg: var(--bg-two);
}
[color-scheme='third']{
--bg: var(--bg-three);
}
body{
display: grid;
min-height: 100vh;
place-content: center;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(31, 30, 30);
color: white;
}
h2{
transition: all 250ms ease-in-out;
padding: 1rem;
background-color: var(--bg);
}
.bg{
position: absolute;
height: 40px;
width: 40px;
top: -5px;
border-radius: 50%;
transition: background-color 350ms ease,
left 250ms ease ;
}
.container input[type=radio]:checked ~ .bg {
background-color: green;
}
.container input[type=radio]:nth-child(1):checked ~ .bg {
background-color: red;
left: -1px;
}
.container input[type=radio]:nth-child(2):checked ~ .bg {
background-color: blue;
left: 31px;
}
.container input[type=radio]:nth-child(3):checked ~ .bg {
background-color: orange;
left: 60px;
}JS
const root = document.querySelector(':root')
const toggle = document.querySelectorAll('.radio')
const input = document.querySelectorAll('input [type="radio"]')
let theme = 'second';
root.setAttribute('color-scheme', `${theme}`)
const loadTheme = theme => {
root.setAttribute('color-scheme', `${theme}`)
}
toggle.forEach(radio =>{
radio.addEventListener('click', () => {
let theme = radio.getAttribute('data-radio')
loadTheme(theme)
})
})
document.addEventListener('keydown', e =>{
console.log(e)
input.forEach(radio =>{
let theme = radio.getAttribute('data-type')
loadTheme(theme)
})
})编辑：-删除了不必要的CSS，因为我不能发布整个事情
回答 1
Stack Overflow用户
发布于 2021-09-23 22:30:11
我想通了。如果其他任何人都面临同样的问题，这里是解决方案。
首先，从app.js中删除以下代码:-
document.addEventListener('keydown', e =>{
console.log(e)
input.forEach(radio =>{
let theme = radio.getAttribute('data-type')
loadTheme(theme)
})
})现在在app.js中添加以下代码:-
input.forEach(button => {
//console.log(button.checked)
button.addEventListener('change', e=>{
let radio = e.target;
theme = button.getAttribute('data-type');
loadTheme(theme)
})
})问题是，通过使用keydown事件侦听器，我能够获得数据类型，但它是以前的状态。(例如：如果我点击从老虎到熊，我会得到老虎的数据类型，而不是我们当前切换到的熊的bdata类型。)
取而代之的是使用change eventlistener，我们可以获得我们的切换被锁定的当前数据类型。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69307109
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号