3个小问题，求老师解答。1.关于宽高；2.上树的位置是否有讲究；3.关于通过id获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #myTab{border-collapse: collapse;}
        #myTab td{
            width: 120px;/*加了边框后，宽度为什么变成120.8px?*/
            height: 60px;/*加了边框后，高度为什么变60.8px?*/
            text-align: center;
            border: 1px solid #000;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <section>
        <table id="myTab"></table>
    </section>
    <script>
        /* 乘法表 */
        function mutiFormulaTable(){
            // var myTab = document.getElementById('myTab');不要也行？
            for(var i=0;i<9;i++){
                var tr = document.createElement('tr');//上树语句的位置？
                myTab.appendChild(tr);//直接通过id获取元素会不会出现问题？
                for(var j=0;j<=i;j++){
                    var td = document.createElement('td');
                    tr.appendChild(td);
                    td.innerHTML = (j+1)+'*'+(i+1)+'='+(j+1)*(i+1);
                    //B位置：视频中td上树的位置
                }
                //A位置：视频中tr上树的位置
            }
        }
        mutiFormulaTable();
    </script>
</body>
</html>

今天也要加了个油 2020-07-31

源自：JS DOM 2-18 节点的创建、移除和克隆

收起

3回答

好帮手慕粉回答被采纳获得+3积分 2020-08-01 14:21:56

同学你好，可能是浏览器渲染问题。从同学提供的数据来看，宽高并不是跟缩放比成倍发生变化的，也没有什么比例关系，只会变动很小的零点几px。可能是在页面缩放过程中，元素进行重绘了，重绘的过程中，计算会有点误差，所以元素的尺寸，会有一个不稳定的浮动。同学可以给div设置一个不好计算的数，或者多设计一些，也会出现这样的现象：

同学可以不用理会。

收起回答

好帮手慕粉 2020-08-01 10:14:41

同学你好，关于同学的问题回答如下：

1、同学是不是看反了呢，老师这边测试的浏览器100%显示，宽高是121*61：

页面缩放后才会变成120.8*60.8：

同学可以再测试下。

2、先在枝干上接上树叶，再把整体接到树上会好一点。

收起回答

提问者今天也要加了个油 #1

老师，我拿一个div进行测试，缩放页面，div的尺寸在视觉上会变化，但是鼠标放上去，显示的尺寸是始终不变的。将谷歌浏览器升级到最新版后，还是这样的。这个是设定吗？为什么会这样。 td测试结果是： 50% 121.6 * 60.8 80% 121 * 61 100% 120.8 * 60.8 125% 120.96 * 60.16 打扰老师了。

2020-08-01 11:15:53

好帮手慕粉 2020-07-31 14:52:04

同学你好，关于同学的问题回答如下：

1、老师这边测试的宽高是121px和61px：

是因为同学设置了边框合并属性，同学可以认为合并了以后，没有了右边框和下边框，所以宽高就是120+1和60+1。

2、是的，可以直接写id设置一些内容，但是这样是不规范的，还是建议同学正常获取元素。

3、代码实现的是正确的，位置也是正确的。

如果我的回答帮助了你，欢迎采纳。祝学习愉快~

收起回答

提问者今天也要加了个油 #1

1.我用的谷歌浏览器，100%缩放时，td是120.8*60.8，页面缩放缩小到80%时，td才变成121*61，想不通原因； 3.视频里面myTab.appendChild(tr)在注释的A位置，也就是在tr.appendChild(td)之后，可以理解成【先在树上接上枝干再接上树叶】与【先在枝干上接上树叶，再把整体接到树上】效果相同吗，哪种写法更好？

2020-07-31 21:09:07