我创建了一个迷宫，可以从用户那里获取高度和宽度值。我给迷宫对象设置了背景色，但我希望背景宽度与迷宫的宽度相同。如果迷宫的宽度变大，背景也会变大。我怎样才能做到这一点？这是我的html代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.mze
{
color: Blue;
text-align: center;
background-color: Yellow;
width: 100%;
}
.prompt
{
background-color: Yellow;
color: Red;
}
</style>
<script src="mazegenerator.js"></script>
<title>Maze</title>
</head>
<body>
<div id="maze">
<form style="text-align: center" name="forma1">
<br/>
<label>
HEIGHT: </label>
<input type="text" id="height" name="height" autofocus="autofocus"
maxlength="2" size="6" value="" />
<label>
WIDTH: </label>
<input type="text" id="width" name="width" maxlength="2" size="6" value="" />
<br/>
<br/>
<span id="prompt"></span>
<br/>
<input type="button" alt="submit" onclick="CreateMaze();"
value="Generate" style="margin-top: 10px;">
</form>
</div>
<div id="Mzobj" align="center">
<pre id="out" class="mze"></pre>
</div>
</body>
</html>
这是我从用户那里获得价值的js部分：
function CreateMaze(){
//gets the value of Height & Width from user
var a = parseInt(document.getElementById("height").value);
var b = parseInt(document.getElementById("width").value);
//Values of Height and Width can't be zero
if (a == 0) {
document.getElementById('prompt').innerHTML = "<b>height</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
if (b == 0) {
document.getElementById('prompt').innerHTML = "<b>width</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
//Width can't be smaller than height
if (a > b) {
document.getElementById('prompt').innerHTML = "not possible";
document.getElementById('prompt').className = "prompt";
}
else {
document.getElementById('prompt').innerHTML = "";
document.getElementById('prompt').className = "";
}
document.getElementById('out').innerHTML = display(maze(a,b));
}
//Display the maze
function display(m) {
var text= [];
for (var j= 0; j<m.x*2+1; j++) {
var line= [];
if (0 == j%2)
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
line[k]= '+';
else
if (j>0 && m.verti[j/2-1][Math.floor(k/4)])
line[k]= ' ';
else
line[k]= '-';
else
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
if (k>0 && m.horiz[(j-1)/2][k/4-1])
line[k]= ' ';
else
line[k]= '|';
else
line[k]= ' ';
if (0 == j) line[1]=line[3]=' ',line[2]= 'S';
if (m.x*2-1 == j) line[4*m.y]= 'E';
text.push(line.join('')+'\r\n');
}
return text.join('');
这是我得到的图像：
最佳答案
只要用户输入的宽度以像素为单位，您就可以在“ CreateMaze（）”函数的末尾添加以下代码...document.getElementById("Mzobj").setAttribute("style", "width:" + b + "px");
如果不是，那么您将需要弄清楚如何将输入的宽度转换为可以在HTML页面中使用的尺寸。如果是字符数，则需要找出字体中的字符占用了多少个单位并进行计算。 var width = <number units per character> * <number of characters>以下链接应有助于单位。
http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/05/l05_03.html?m=1
关于javascript - <div>获取自动宽度，无需在html中初始化，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23915752/