Question

每当有人单击按钮时，我都想更改按钮的样式，而我正尝试使用我在JavaScript文件中编写的函数来完成此操作，但是该按钮不起作用，并且会出现此错误：“ Uncaught TypeError ：无法在SignUp_Click上设置未定义的属性'borderBottom'。

function SignUp_Click() {
    document.getElementsByClassName("Sign_up").style.borderBottom = "12px solid #c00000";
}

.Sign_up {
    float: right;
    height: 93px;
    width: 115px;
    border-left: 1px solid #d1d5dc;
}

    .Sign_up input[type=button] {
        border: none;
        direction: rtl;
        font-size: 16pt;
        color: #262626;
        background: url('images/sign_up.png') right center no-repeat;
        padding: 5px 25px 5px 5px;
        margin: 30px 15px 0 0;
        cursor: pointer;
    }

<div class="Sign_up"> <input type="button" value="Sign up" onmousedown="SignUp_Click()"/> </div>

Answer 1

document.getElementsByClassName返回HTMLCollection，而不是单个元素。

因此，您应该使用类似的方法来选择集合的第一个元素：

document.getElementsByClassName("Sign_up")[0].style.borderBottom = "12px solid #c00000";

或使用document.querySelector：

document.querySelector(".Sign_up").style.borderBottom = "12px solid #c00000";

返回第一个匹配元素。

Answer 2

document.getElementsByClassName返回具有指定类的所有元素的HTML集合，而不仅仅是一个元素，请使用document.querySelector('.Sign_up')来获取类Sign_up或索引的第一个元素document.getElementsByClassName返回的集合：

function SignUp_Click() {
  // or document.querySelector('.Sign_up') but without [0]
  document.getElementsByClassName("Sign_up")[0].style.borderBottom = "12px solid #c00000";
}

.Sign_up {
  float: right;
  height: 93px;
  width: 115px;
  border-left: 1px solid #d1d5dc;
}

.Sign_up input[type=button] {
  border: none;
  direction: rtl;
  font-size: 16pt;
  color: #262626;
  background: url('images/sign_up.png') right center no-repeat;
  padding: 5px 25px 5px 5px;
  margin: 30px 15px 0 0;
  cursor: pointer;
}

<div class="Sign_up"> <input type="button" value="Sign up" onmousedown="SignUp_Click()" /> </div>

Answer 3

我相信您选择按钮的方式就是问题所在。我也会考虑给它一个ID并选择它！（getElement s ByClassname返回一个集合！）

function SignUp_Click() {
    document.querySelector(".Sign_up").style.borderBottom = "12px solid #c00000";
}

.Sign_up {
    float: right;
    height: 93px;
    width: 115px;
    border-left: 1px solid #d1d5dc;
}

    .Sign_up input[type=button] {
        border: none;
        direction: rtl;
        font-size: 16pt;
        color: #262626;
        background: url('images/sign_up.png') right center no-repeat;
        padding: 5px 25px 5px 5px;
        margin: 30px 15px 0 0;
        cursor: pointer;
    }

<div class="Sign_up"> <input type="button" value="Sign up" onmousedown="SignUp_Click()"/> </div>

Answer 4

一种更简单的方法（如果您愿意使用 jQuery ）

$（“。Sign_up”）。css（“ border-bottom”，“ 12px solid＃c00000”）;

当涉及到使用js的CSS样式元素时，我个人更喜欢jQuery。

如何解决此错误：“未捕获的TypeError：无法在“ MyClassName”处设置未定义的属性“ borderBottom”？

4 个答案: