Question

alert($('#myTableHeader1').width());
alert($('#myTableHeader1').outerWidth());
alert($('#myTableHeader1').innerWidth());

以上都不奏效。即使我有

<th id="myTableHeader1" width="12%"> testest</th>

我收到错误

null为null或不是对象

Answer 1

jQuery(function(){ 

    alert(jQuery('#myTableHeader1').width());
    alert(jQuery('#myTableHeader1').outerWidth());
    alert(jQuery('#myTableHeader1').innerWidth());

});

问题是您是否在创建节点之前运行JavaScript代码。因此，您可以在底部添加JavaScript，也可以在dom准备就绪后运行代码。

传递到jQuery的任何内容都在dom ready

上运行

jQuery(function(){

    // codes written here runs at dom ready

});

注意：下面写的type1和type2是相同的东西

输入1

jQuery(function(){

});

类型2

$(document).ready(function() { 


}) ;

What is the difference between these jQuery ready functions?

Answer 2

您可能尝试在dom中存在之前访问这些元素。这样做的方法是收听window.onload或document.ready事件。 jQuery使这很容易，因为标准工厂方法可以使用函数自动绑定到document.ready事件：

jQuery(function($){});

这有一个额外的好处，它可以用来将jQuery别名变为$以允许使用$的兼容性，而不必担心noConflict。

jQuery(function($){

  alert($('#myTableHeader1').width());
  alert($('#myTableHeader1').outerWidth());
  alert($('#myTableHeader1').innerWidth());

});

你最好开始使用console.log而不是alert，因为你可以在opera或chrome中使用firebug或内置控制台。

要使用console.log，您应该检查console是否存在：

if (window.console)
{
  console.log(
    $('#myTableHeader1').width(),
    $('#myTableHeader1').outerWidth(),
    $('#myTableHeader1').outerWidth()
  );
}

这可能是也可能不是您正在寻找的解决方案。告诉你需要发布HTML和JavaScript。它可能像拼写错误或糟糕的html语法一样简单。

Answer 3

鉴于您有console可用，这应该可以。

$(document)
    .ready(function(){
        console.log(
            $('#myTableHeader1').width(),
            $('#myTableHeader1').outerWidth(),
            $('#myTableHeader1').outerWidth()
        );
    });

Answer 4

我认为如果不在表格中，jquery就不会得到你的

所以试试html：

<table>
<tr>
    <th id="myTableHeader1" width="12%"> testest</th>
</tr>
</table>

这是你的jquery：

$(document).ready(function() {
alert($('#myTableHeader1').width());
alert($('#myTableHeader1').outerWidth());
alert($('#myTableHeader1').innerWidth());
});

这是一个工作示例： here

选择带ID的元素不起作用

4 个答案: