Question

我该如何修复此错误：“未捕获的类型错误：无法在“MyClassName”处设置未定义的属性‘borderBottom’”？[重复]

2019-08-23

1610

javascript html css

我想在有人点击按钮时更改按钮的样式，我尝试使用我在 JavaScript 文件中编写的函数来执行此操作，但它不起作用并出现此错误：“未捕获的 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>