为什么是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回答
同学你好,问题解答如下:
1、这是因为border是table标签的属性,属性直接通过“element.属性名”的语法获取或者设置即可。如下 :

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

上面的代码是在元素中设置css样式,css样式需要写在style属性中。想要设置上面的边框,需要通过table.style.border="1px solid #ccc"设置。
3、同学所设置的rules,并没有这个css样式。
祝学习愉快~
相似问题