我正在尝试创建一条从窗口的一侧绘制到另一侧的线条。使用javascript我希望它在某个点上。我想检测窗口大小和导航栏高度。我遇到的问题是没有显示该行。
这是我的javascript和html代码：
<script>
function createLineScreenWidth() {
var elem = getElementsByTagName("svg")[0];
var line = getElementsByTagName("line")[0];
var y_pos = getElementByID("navbar").height;
elem.style.height = "10";
elem.style.width = screen.width;
line.style.stroke = rgb(188, 204, 229);
line.x2 = screen.width;
line.y1 = line.y2 = y_pos;
}
</script>
<div class="navbar" id="navbar">
<nav>
<a href="/contact/"><div class="pageIcon">CONTACT</div></a>
<a href="/products/"><div class="pageIcon">PRODUCTS</div></a>
<a><div class="pageIcon onpageIconChange">ABOUT</div></a>
</nav>
</div>
<svg onload="createLineScreenWidth()">
<line x1="0" style="stroke-width: 2;" />
</svg>
答案 0 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ds</title>
<style>
#navbar{
position: relative;
}
</style>
</head>
<body>
<script>
function createLineScreenWidth() {
var elem = document.getElementsByTagName("svg")[0];
var line = document.getElementsByTagName("line")[0];
var y_pos = document.getElementById("navbar").clientHeight;
elem.style.height = "100";
elem.style.width = screen.width;
// line.style.stroke = "red";
// line.x2 = screen.width;
// line.y1 = line.y2 = y_pos;
line.setAttribute('x1','0');
line.setAttribute('y1',y_pos);
line.setAttribute('x2',screen.width);
line.setAttribute('y2',y_pos);
line.setAttribute("stroke", "rgb(188, 204, 229)")
elem.appendChild(line);
}
</script>
<div class="navbar" id="navbar">
<nav>
<a href="/contact/"><div class="pageIcon">CONTACT</div></a>
<a href="/products/"><div class="pageIcon">PRODUCTS</div></a>
<a><div class="pageIcon onpageIconChange">ABOUT</div></a>
</nav>
</div>
<svg onload="createLineScreenWidth()">
<line x1="0" style="stroke-width: 2;" />
</svg>
</body>
</html>
实际上有很多错误