Question

我正在尝试使用css / JavaScript创建一个简单的开关。在下面你可以看到即时通讯

document.getElementsByClassName('onOffSwitch').style.animation = 'off';

jsBin

js需要什么其他代码才能理解我在谈论名为＆＃39; onOffSwitch＆＃39 ;?的div想知道为什么这个当前的代码集不起作用以及如何修复它。

Answer 1

getElementsByClassName()返回集合。像下面这样指定index。

document.getElementsByClassName('onOffSwitch')[0].style.animation = 'off';

Answer 2

因为.getElementsByClassName()返回了live node list（集合）元素，并且您正在尝试设置集合的样式，而不是集合中的一个元素：

// Change the animation style of the first element with the class "onOffSwitch"
document.getElementsByClassName('onOffSwitch')[0].style.animation = 'off';

另外，因为.getElementsByClassName()会返回＆＃34;直播＆＃34;节点列表（每次使用分配给列表的变量时更新的列表），它确实会阻碍性能。在大多数情况下，静态节点列表更好，您可以使用：

document.querySelectorAll(".onOffSwitch");

但是，同样的规则也适用。这是整个系列。您需要访问集合中的各个元素才能使用其属性。

现在，看看你的代码，你根本不想要一个集合。您只有一个div class="onOffSwitch"，因此您可以使用以下内容获取该元素：

document.querySelector("div.onOffSwitch");

然后你可以直接使用它。

＆＃13;

let state = {
		switchG: 'On',
		bits: [0,1,0,1]
};


// Get reference to the div
var divSwitch = document.querySelector('div.onOffSwitch');

// Set up event handler
divSwitch.addEventListener("click", flipSwitch);

function flipSwitch() {
  if (state.switchG == 'On'){
    state.switchG = 'Off';
    console.log(state.switchG);
		divSwitch.style.animation = 'off 1s 1';
	} else {
		state.switchG = 'On';
    console.log(state.switchG);
		divSwitch.style.animation = 'on 1s 1';	
	}
}

＆＃13;

.onOffSwitch{
	background-color: #4dc71f;
	border-radius: 5px;
	position: absolute;
	left: 40%;
	height: 20px;
	width: 55px;
	overflow: hidden;
	text-align: center;
  cursor:pointer;
}

@keyframes off {
	0%{ background-color: green; }
	100%{ background-color: red; }
}

@keyframes on {
	0%{ background-color: red; }
	100%{ background-color: green; }
}

＆＃13;

<div class = 'onOffSwitch'>On</div>

＆＃13;

为什么我的函数在调用document.getElementsByClassName时返回undefined？

2 个答案: