javascript - 如何使用 javascript 编写我的按钮 onclick？

Question

这是我的js:

function showMore() {
    document.getElementById("watch-description").style.display = "block";
    document.getElementsByClassName(".yt-card.yt-card-has-padding").style.padding = "15px";
}

function showLess() {
    document.getElementById("watch-description").style.display = "none";
    document.getElementsByClassName(".yt-card.yt-card-has-padding").style.padding = "15px 15px 10px 15px";
}

为什么我的带有js功能的按钮不起作用？

两个按钮之一:

<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-expander yt-uix-expander-head yt-uix-expander-body" type="button" onclick="showLess();">

Answer 1

根据我的评论，document.getElementsByClassName()返回一个 HTMLCollection 而不是单个元素。您需要将其视为Array，以便在各个元素上设置样式:

function showMore() {
    document.getElementById("watch-description").style.display = "block";

    var els = document.getElementsByClassName("yt-card yt-card-has-padding");
    for (var i = 0; i < els.length; i++) {
        els[i].style.padding = "15px";
    }
}

function showLess() {
    document.getElementById("watch-description").style.display = "none";

    var els = document.getElementsByClassName("yt-card yt-card-has-padding");
    for (var i = 0; i < els.length; i++) {
        els[i].style.padding = "15px 15px 10px 15px";
    }
}