JavaScript-在keyDown上切换css样式

JavaScript - Toggle css style on keyDown

本文关键字：css 样式 keyDown JavaScript-      更新时间：2023-09-26

需要一些帮助来找出我的第二个函数的问题。JSfiddle在这里：JSfiddle

//add an outline on click
function addOutline(){
    box1.classList.toggle('selected');
}
box1.addEventListener('click', addOutline, false);

//change shape on element with class "selected" when "e" is pressed
function changeShape (event) {
    var arr = document.getElementsByClassName("selected");
    var key = event.keyCode;
        for(var i = 0; i < arr.length; i++) {
            if(key === 69 && arr[i].className === "selected") {
                box1.classList.toggle('circle');
            }   
        }
}
document.addEventListener("keydown", changeShape, false);

基本上，我想做的是，当按下键"e"时，如果元素className等于"selected"，那么div"box"应该切换circle类（从css）。

我让它只使用keyDown，但当试图将className语句添加到函数中时，它不起作用。请查看顶部的jsfiddle以了解更多信息。有什么想法吗？

因为className包含多个类，所以这不起作用：

arr[i].className === "selected"

由于此时arr仅包含元素，这些元素包括"选定"类，因此不需要进行该检查。

但是，如果您出于其他原因需要它，您可以使用classList.contains：

arr[i].classList.contains("selected")

Fiddle

您的元素有多个类吗？如果是，也许这会有所帮助：

if(key === 69 && arr[i].className.indexOf("selected") > -1) {

用indexOf()更改此行有效：

if(key === 69 && arr[i].className.indexOf("selected")>-1)

更新的JS Fiddle

这是因为className不等于selected，而是等于selected box center green size200。

我会为has类添加函数，这样你就不必担心如果你有一个包含selected的类，然后只添加键代码和hasclass（）的组合。

以下是hasClass的函数以及如何修改代码：

function hasClass(el, cls) {
  return el.className && new RegExp("(''s|^)" + cls + "(''s|$)").test(el.className);
}

然后只需将您的代码更改为：

if(key === 69 && hasClass(arr[i],"selected")) {
                box1.classList.toggle('circle');
            }

这是更新的fiddle JSFiddle

相关文章：