为什么我不能在 html dom 上使用 javascript 为我的 div 添加宽度和高度

Question

所以我正在玩一些有人要求我做的挑战：在彼此内部绘制正方形，但内部正方形必须有直接外部正方形的一半，并且它们必须居中

这是我到目前为止编写的代码：

(function(){
    var width=200;
    var bodyEle=document.getElementById('result');
    while(width>2){
    var square =document.createElement('div');

        square.style.width =width+'px';
        square.style.height =width+'px';
        square.setAttribute('style','border:2px solid black');
        width=width/2;
        bodyEle.appendChild(square);

    }
}());

问题是 div 似乎不符合我给它们的宽度。

这也是我尝试过的一种方法，我很确定这不是最好的方法，如果你们有办法实现同样但优雅的方法，请分享

https://jsfiddle.net/op22uLug/3/

Answer 1

首先：div是块级元素，所以默认会跨越full with。第二：设置 width/height 样式后，您在 square.setAttribute('style','border:2px solid black');

中覆盖了它

正确的代码是：

(function(){
  var width=200;
  var bodyEle=document.getElementById('result');
  while(width>2){
    var square =document.createElement('div');

    square.style.width =width+'px';
    square.style.height =width+'px';
    square.style.display = 'inline-block';
    square.style.border = '2px solid black';
    //square.setAttribute('style','border:2px solid black');
    width=width/2;
    bodyEle.appendChild(square);
  }
}());

为什么我不能在 html dom 上使用 javascript 为我的 div 添加宽度和高度

Why can't I add width and height to my div using javascript on html dom

html

javascript

css

simple-html-dom