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

Question

我正在测试一些页面模板，这些模板最终将由 HTTP 服务器应用程序输出；这些页面将主要显示在智能手机浏览器中，因此我需要付出额外的努力来实现紧凑的布局，并具有滚动功能来处理溢出(以避免换行，这会对影响垂直布局)。在我的一个初步 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='       '
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，以便它们动态调整到正确的宽度 strong> 适应水平滚动；但是，在弄清楚为什么 style.width 属性没有返回可用值之前，我无法继续执行此任务。 CSS 中为引用的宽度指定了默认值，因此我很困惑为什么 DOM/javascript 引用不包含 中指定的值CSS。

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

要查看我所描述的问题，请移动水平滚动条并注意底部 3 条调试行以“E.style.width =”结尾；我期望看到 IndexContainer 和 IndexHeader 元素为“600px”，以及 1000px”。 strong>IndexListTable 元素(在 CSS 中指定的值)。

JavaScript 框架设置为无库(纯 JS)，加载类型设置为无换行 -在头脑中。我希望保持这种方式，并避免使用 JQuery(以使页面尽可能独立且独立)。

谢谢

Answer 1

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