Fatal编程技术网
  • javascript/
  • Javascript <；部门>；在html中获取自动宽度而不进行初始化

Javascript <；部门>；在html中获取自动宽度而不进行初始化

javascript html css

Javascript <；部门>；在html中获取自动宽度而不进行初始化,javascript,html,css,Javascript,Html,Css,我创建了一个迷宫，从用户那里获取高度和宽度值。我为迷宫对象指定了背景色，但我希望背景宽度与迷宫宽度的大小相同。如果迷宫的宽度变大，背景也会变大。我该怎么做？这是我的html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> .mze {

我创建了一个迷宫，从用户那里获取高度和宽度值。我为迷宫对象指定了背景色，但我希望背景宽度与迷宫宽度的大小相同。如果迷宫的宽度变大，背景也会变大。我该怎么做？这是我的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:&nbsp;</label>
            <input type="text" id="height" name="height" autofocus="autofocus" 
              maxlength="2" size="6" value="" />
            <label>
                &nbsp;&nbsp;&nbsp; WIDTH:&nbsp;</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>


mze先生
{
颜色：蓝色；
文本对齐：居中；
背景颜色：黄色；
宽度：100%；
}
促使
{
背景颜色：黄色；
颜色：红色；
}
迷宫


高度：
宽度：
这是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（）{
//从用户处获取高度和宽度的值
var a=parseInt（document.getElementById（“height”）.value）；
var b=parseInt（document.getElementById（“宽度”）.value）；
//高度和宽度的值不能为零
如果（a==0）{
document.getElementById（'prompt'）.innerHTML=“高度无效”；
document.getElementById（'prompt'）.className=“prompt”；
返回；
}
如果（b==0）{
document.getElementById（'prompt'）.innerHTML=“宽度无效”；
document.getElementById（'prompt'）.className=“prompt”；
返回；
}
//宽度不能小于高度
如果（a>b）{
document.getElementById（'prompt'）.innerHTML=“不可能”；
document.getElementById（'prompt'）.className=“prompt”；
}
否则{
document.getElementById（'prompt'）.innerHTML=“”；
document.getElementById（'prompt'）.className=“”；
}
document.getElementById（'out'）.innerHTML=display（迷宫（a，b））；
}
//展示迷宫
功能显示（m）{
var text=[]；

对于（var j=0；j，只要用户输入的宽度以像素为单位，就可以在“CreateMaze（）”函数的末尾添加以下代码


document.getElementById（“Mzobj”）.setAttribute（“样式”，“宽度：”+b+“px”）；

如果不是，则您需要找出如何将输入的宽度转换为在HTML页面中工作的度量值。如果是字符数，则需要找出字体中字符所占的单位数并进行计算。
var width=*
下面的链接应该有助于计算单位


最有可能的是，你的js导致了这个问题。我同意@Huangism…事实上，
style
属性被添加到
div
中，这让我觉得是js设置了宽度。看那里，如果你仍然坚持发布js。我已经发布了js@BallbinAh，是的，我看到了…抱歉运行了一点今天速度很慢。在显示javascript中不使用括号有什么原因吗？很难理解。