Question

绒毛：这是一项作业，我需要使用javascript创建和操作hr标签。我需要在主体标签后直接插入.js文件。

问题：我无法获取hr的width属性来应用。

我尝试了setAttribute（）和.style.width = blah。都没有为我工作。我要去哪里错了？

function headerFunction() {
  var h1 = document.getElementById('h1');
  h1.innerHTML = "L. Name";
  h1.style.color = "red";
  h1.style.fontFamily = "Tahoma";
  h1.setAttribute("align", "center");

  var h2 = document.getElementById('h2');
  h2.innerHTML = "WEB 101.0001";
  h2.style.color = "red";
  h2.style.fontFamily = "Garamond";
  h2.setAttribute("align", "center");
  h2.style.fontStyle = "italic";

  var h3 = document.getElementById('h3');
  h3.innerHTML = "Build Your Resume";
  h3.setAttribute("align", "center");

  var newElem = document.createElement("HR");
  var hR = document.getElementById('header');
  hR.insertBefore(newElem, hR.childNodes[4]);
  var hrule = document.getElementsByTagName("HR");
  hrule.setAttribute("width", "60%");
}

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" src="finalCSS.css">
<title>Web 115 Final Project</title>

</head>

<body onload="headerFunction()">
  <script src="projectJS.js"></script>
	<header id="header">
    <h1 id="h1"></h1>
    <h2 id="h2"></h2>
    <h3 id="h3"></h3>
  </header>
  <form action="" name="form1">
</body>
</html>

Answer 1

您应该使用浏览器的开发人员工具检查错误控制台，并查看是否出现以下错误：

未捕获的TypeError：hrule.setAttribute不是函数

这意味着hrule[0]不是您认为的那样。您将其视为一个元素，但实际上您正在找回一个元素数组。您可能想要第一个，因此可以将其引用为.style。

从那里，您可以像先前尝试的那样使用handles设置宽度。

仅使用Javascript设置HR标签的宽度

1 个答案: