使用JavaScript设置TD的宽度

我试图根据窗口宽度减去像素量来设置TD的宽度，并使其响应。我特别想用它来制作一个与实时流和聊天窗口大小相同的页面，但它在宽度减去我设置的像素量的情况下似乎不起作用

代码如下：

<table id="table_big"> 
    <tr>
        <td id="player_table">Content is not important just text</td>
        <td id="chat_table">Content is not important just text</td>
    </tr>
</table>

<script language="javascript" type="text/javascript">
    window.addEventListener("resize", resize);
    function resize()
    {
        var myWidth = 0, myHeight = 0;
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            myWidth = window.innerWidth;
            myHeight = window.innerHeight;
        } else if( document.documentElement && ( document.documentElement.clientWidth ||                             document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth;
            myHeight = document.documentElement.clientHeight;
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth;
            myHeight = document.body.clientHeight;
        }
        document.getElementById("chat").height = myHeight* 0.78 + 'px';
        document.getElementById("width").width = myWidth ;
        document.getElementById("table_big").height = myHeight + 'px';
        document.getElementById("chat_table").width = '340px';
        document.getElementById("player_table").width = myWidth - '340px';
    }
    resize();
</script>

内容不重要，重要的是文字
内容不重要，重要的是文字
addEventListener（“调整大小”，调整大小）；
函数resize（）
{
var myWidth=0，myHeight=0；
if（typeof（window.innerWidth）=“number”）{
//非IE
myWidth=window.innerWidth；
myHeight=window.innerHeight；
}else if（document.documentElement&（document.documentElement.clientWidth | | document.documentElement.clientHeight））{
//IE 6+处于“标准兼容模式”
myWidth=document.documentElement.clientWidth；
myHeight=document.documentElement.clientHeight；
}else if（document.body&（document.body.clientWidth | | document.body.clientHeight））{
//IE4兼容
myWidth=document.body.clientWidth；
myHeight=document.body.clientHeight；
}
document.getElementById（“chat”）.height=myHeight*0.78+'px'；
document.getElementById（“宽度”）.width=myWidth；
document.getElementById（“table_big”）.height=myHeight+'px'；
document.getElementById（“chat_table”）.width='340px'；
document.getElementById（“player_table”）.width=myWidth-'340px'；
}
调整大小（）；

---

由沙申克修好。行

document.getElementById（“宽度”）.width=myWidth

返回空值，我也从它们中删除了px

为什么不将其设置为100%宽度并使用响应CSS？很高兴看到您支持IE4，它的市场份额仍然超过0.0001%。问题太多了，我甚至不知道从哪里开始。但是这里有一个突出的问题，表达方式：

myWidth-'340px'

将是NaN。“px”也表示CSS，而不是HTML属性。@Shashank那么你知道如何修复它吗？我已经尝试了我能想到的一切。每当窗口被重新调整大小时，它都应该重新调整表的大小，但是左侧的TD只需要340像素宽。另一面需要尽可能宽减去340像素。将其设置为

myWidth-340

。在Javascript中，减去字符串会得到NaN（不是数字）。把所有的“px”东西都拿出来，你只把它们用在造型上。另外，如果

document.getElementById（“chat”）

返回null或undefined，则当您尝试访问null/undefined的width或height属性时，javascript将出错。因此，请确保这些元素确实存在于DOM中，否则脚本将在早期停止。