table设置height属性不起作用的解决办法
文章分类:Web前端 关键字: height table 设置 js 无效
最近写JS对table的操作时,发现一个奇怪的现象,对table的width属性进行设置可以改变table的大小,但对table的height属性进行设置时,居然报没有这个属性。代码如下:
经查,问题应该是在于这个HTML的文件头,我当前使用的文件头是:
猜想应该是由于在这个xhtml的dtd里,table没有定义height这个属性,所以不能直接用table.height进行属性设置。
当然,如果你使用其他的表头,有可能这样的设置方法是可以生效的,更详尽的原因还没时间去深究,希望有知道的高手们能指点一二。这里只给出我自己对于这个问题的解决方法。
解决方法:根据经验,直接设置属性的方法行不通,可以尝试通过使用setAttribute()方法,居然可以了,代码如下:
- var table = document.getElementById("textTable");
- table.width = 90%; //这句可以正常执行并改变Table宽度
- table.height = 50%; //这句无法正常执行,使用alert(table.height);调试可发现,height属性不存在。
经查,问题应该是在于这个HTML的文件头,我当前使用的文件头是:
- <!DOCTYPE html
- PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
猜想应该是由于在这个xhtml的dtd里,table没有定义height这个属性,所以不能直接用table.height进行属性设置。
当然,如果你使用其他的表头,有可能这样的设置方法是可以生效的,更详尽的原因还没时间去深究,希望有知道的高手们能指点一二。这里只给出我自己对于这个问题的解决方法。
解决方法:根据经验,直接设置属性的方法行不通,可以尝试通过使用setAttribute()方法,居然可以了,代码如下:
- var table = document.getElementById("textTable");
- table.width = 90%;
- table.setAttribute("height",50%); //这里改成这样设置就解决了