为什么是table.border = '1px'; 呢?为什么table.style,rules = groups;不可以呢?

来源:2-4 编程练习

慕前端2185815

2021-03-10 21:16:48

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>模版字符串</title>

</head>


<body>

    <script type="text/javascript">

    const tmpl = function() {

        return {

            title: "前端",

            data: [{

                title: '布局基础',

                date: ["html", "css"]

            }, {

                title: '网页特效',

                date: ["javascript", "jquery"]

            }, {

                title: '框架',

                date: ["bootstrap", "vue"]

            }]

        }

    }

    // 补充代码

    let {title:name,data} = tmpl();

    const arr =[];

    arr.push(`<caption>${ name }</caption>`);

    data.forEach(function({title,date}){

      const [lang1,lang2] = date;

      arr.push(

          `

          <tr>

          <td>${ title }</td>

          <td>${ lang1 }</td>

          <td>${ lang2 }</td>

          </tr>

          `

        )

    })

    var table = document.createElement('table');

    table.innerHTML = arr.join('');

    document.body.appendChild(table);

    table.border = '1px';

    </script>

</body>

</html>

问题描述:

为什么是table.border = '1px';  呢?为什么table.style,rules = groups;不可以呢?

该代码还有可优化的地方吗?

写回答

1回答

好帮手慕夭夭

2021-03-11

同学你好,问题解答如下:

1、这是因为border是table标签的属性,属性直接通过“element.属性名”的语法获取或者设置即可。如下 :

http://img.mukewang.com/climg/60497f1409b2975803460049.jpg

上面的代码是设置元素中的属性。

2、如果是写在sytle属性中的样式,才需要使用table.style.border的语法设置。如下:

http://img.mukewang.com/climg/60497f79099b480505070050.jpg

上面的代码是在元素中设置css样式,css样式需要写在style属性中。想要设置上面的边框,需要通过table.style.border="1px solid #ccc"设置。

3、同学所设置的rules,并没有这个css样式。

祝学习愉快~

0

0 学习 · 10739 问题

查看课程