jsFiddle 中的空白 element.style.width 属性

Question

我正在测试一些最终将由 HTTP 服务器应用程序输出的页面模板；这些页面将主要显示在智能 phone 浏览器中，因此我非常努力地实现具有滚动功能的紧凑布局以处理溢出（以避免 wrapping 这会对垂直布局产生负面影响）。在我的一个初步 jsFiddles 中，我的进度被一个我无法理解的异常所阻碍：

为什么 element.style.width 属性返回空白中的值 fiddle?

https://jsfiddle.net/bkilmer/bcwmozmd/

// JavaScript section of Fiddle

//This function returns elements by id
function xid(id) {
  return document.getElementById(id);
}

// This function returns debugging string
function EStr(EID) {
var E=xid(EID);
var sep='&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'
return 'E = ' + E + sep + 'E.id = ' + E.id + sep + 
       'E.style.width = ' + E.style.width; // E.style.width is BLANK
}

// This function syncs the horz position of the header
// with the horz scroll of the associated list
function SyncIndexHeaderScroll() {

  var SLStr = 'scrollLeft='+xid('IndexListDiv').scrollLeft;  
  var IC = xid('IndexContainer'); 
  var IH = xid('IndexHeader'); 
  var ILT = xid('IndexListTable');

  // Sync header position
  xid('IndexHeader').style.left = -xid('IndexListDiv').scrollLeft + 'px';

  // Debug signposting
  xid('AName0').innerHTML = SLStr+'; '+SLStr+'; '+SLStr+'; '+SLStr;
  xid('AName1').innerHTML = EStr(IC.id);
  xid('AName2').innerHTML = EStr(IH.id);
  xid('AName3').innerHTML = EStr(ILT.id);

}

// HTML Section of Fiddle

<div id="IndexContainer">
  <div id="IndexHeader">
    <div id="IndexTimeStampHeader">Time Stamp</div>
    <div id="IndexAlarmNameHeader">Alarm Name / Event</div>
  </div>
  <div id="IndexListDiv" onScroll="SyncIndexHeaderScroll()">
    <table id="IndexListTable">
      <tr>
        <td class="IndexListTimeCol" id="TStamp0">Wed Jan 20 @ 22:23:33</td>
        <td class="IndexListNameCol" id="AName0">Alarm 0</td>
      </tr>
      <tr>
        <td class="IndexListTimeCol" id="TStamp1">Wed Jan 20 @ 22:23:43</td>
        <td class="IndexListNameCol" id="AName1">Alarm 1</td>
      </tr>
      <tr>
        <td class="IndexListTimeCol" id="TStamp2">Wed Jan 20 @ 22:23:53</td>
        <td class="IndexListNameCol" id="AName2">Alarm 2</td>
      </tr>
      <tr>
        <td class="IndexListTimeCol" id="TStamp3">Wed Jan 20 @ 22:24:03</td>
        <td class="IndexListNameCol" id="AName3">Alarm 3</td>
      </tr>
    </table>
  </div>
  <div id="IndexBottomDiv">
    <button type="button" class="BB" onclick="BackToMenu()">Back To Menu</button>
  </div>
</div>

// CSS Section of Fiddle

#IndexContainer {
  position: fixed;
  left: 0;
  top: 0;
  height: 400px;
  width: 600px;
  padding: 0px;
  margin: 0px;
  background-color: #FDD;
  border: none;
}

#IndexHeader {
  position: fixed;
  left: 0;
  top: 0;
  height: 20px;
  width: 600px;
  padding: 0px;
  margin: 0px;
  border: none;
  background-color: #DDD;
  background: linear-gradient(#EEE, #CCC);
  font: bold 12px arial, sans-serif;
  overflow: hidden;
}

#IndexTimeStampHeader {
  background: transparent;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 2px 0px 0px 8px;
  height: 16px;
  width: 140px;
  border-style: solid;
  border-width: 1px;
  border-color: #FFF #AAA #AAA #FFF;
}

#IndexAlarmNameHeader {
  background: transparent;
  position: absolute;
  left: 150px;
  top: 0;
  margin: 0;
  padding: 2px 0px 0px 8px;
  height: 16px;
  width: 380px;
  border-style: solid;
  border-width: 1px;
  border-color: #FFF #AAA #AAA #FFF;
}

#IndexListDiv {
  background: #FFF;
  position: fixed;
  overflow: scroll;
  left: 0;
  top: 20px;
  padding: 0;
  margin: 0;
  height: 350px;
  width: 600px;
}

#IndexListTable {
  width: 1000px;
}

.IndexListTimeCol {
  width: 140px;
  font: 12px arial, sans-serif;
}

.IndexListNameCol {
  font: 12px arial, sans-serif;
}

#IndexBottomDiv {
  position: fixed;
  left: 0;
  top: 370px;
  height: 28px;
  width: 598px;
  padding: 0px;
  margin: 0px;
  background-color: #DDD;
  background: linear-gradient(#EEE, #CCC);
  font: bold 12px arial, sans-serif;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #FFF #AAA #AAA #FFF;
}

button.BB {
  position: relative;
  top: 4px;
  height: 20px;
  font: bold 12px arial, sans-serif;
}

此布局的第一个目标是创建一个 列标题，它跟随关联列表的 水平滚动，但保留在垂直固定位置。这是通过 fiddle.

中的 SyncIndexHeaderScroll 函数实现的

第二个目标是调整IndexHeader.style.width和IndexAlarmNameHeader.style.width，让它们动态调整到适当的 width 以适应水平滚动；但是，在弄清楚为什么 style.width 属性没有返回可用值之前，我无法继续执行此任务。在 CSS 中为引用宽度指定了默认值，所以我很困惑为什么 DOM/javascript引用不包含 CSS.

中指定的值

为了调试这个异常，我添加了一些代码来显示一些关键元素的内容（即 IndexContainer、IndexHeader，以及滚动列表第二列的IndexListTable)；该列表在最终模板中将是空白的（将通过最终产品中的 AJAX 查询填写）。

要查看我正在描述的问题，请移动水平滚动条并注意 底部 3 条调试行 以 'E.style.width = ';我期待看到 IndexContainer 和 IndexHeader 元素的 '600px' 和 '1000px' 对于 IndexListTable 元素（在 CSS 中指定的值）。

JavaScript框架设置为No-Library（纯JS）和Load Type 设置为 No wrap - in head。我想保持这种方式并且 避免使用 JQuery（以保持页面为 self-contained 并且独立尽可能）。

谢谢

Answer 1

而不是 E.style.width，使用 E.offsetWidth。

jsFiddle 中的空白 element.style.width 属性

Blank element.style.width property in jsFiddle

html

javascript

css

jsfiddle