javascript - 更改类名JS

Question

我的页面上有此代码:

<td class="CalendarDay CalendarDay--valid" style="width: 39px; height: 38px;"><button type="button" class="CalendarDay__button" aria-label="Choose niedziela, 16 lutego 2020 as your check-in date. It's available." tabindex="-1">16</button></td>

如果“aria-label”属性中有字符串“niedziela”，我想更改类名称。我写了一些东西，但不幸的是它不起作用，我不知道该怎么办。我的代码:

var string = document.getElementsByClassName("CalendarDay CalendarDay--valid").aria-label,
    substring = "niedziela";

if (string.includes(substring)) {
    document.getElementsByClassName("CalendarDay CalendarDay--valid").className = "CalendarDay CalendarDay--blocked CalendarDay--blocked-out-of-range";
}

Answer 1

也许是这个？

document.querySelector("button[aria-label*=niedziela]").classList.add("CalendarDay--blocked-out-of-range");

button { background-color:blue }
.CalendarDay--blocked-out-of-range { background-color:red }

<table><tr>
<td class="CalendarDay CalendarDay--valid" style="width: 39px; height: 38px;"><button type="button" class="CalendarDay__button" aria-label="Choose niedziela, 16 lutego 2020 as your check-in date. It's available." tabindex="-1">16</button></td></tr></table>

也许只使用CSS

将 CSS 移至日期选择器下方

button[aria-label*=niedziela] { background-color:red }

<table><tr>
<td class="CalendarDay CalendarDay--valid" style="width: 39px; height: 38px;"><button type="button" class="CalendarDay__button" aria-label="Choose niedziela, 16 lutego 2020 as your check-in date. It's available." tabindex="-1">16</button></td></tr></table>