Question

我正在测试一些页面的模板，这些模板最终将由 HTTP服务器应用程序输出;这些页面将主要显示在智能手机浏览器中，因此我需要付出额外的努力来实现紧凑的布局，并具有滚动功能以处理溢出（以避免包装这会产生负面影响影响垂直布局）。在我的一个初步的 jsFiddles 中，我的进展受到了一个我无法理解的异常现象的阻碍：

为什么 element.style.width 属性在此小提琴中返回空白值？

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;
}

此布局的第一个目标是创建列标题，该标题位于关联列表的水平滚动之后，但是垂直保留在固定位置。这是通过小提琴中的 SyncIndexHeaderScroll 功能实现的。

第二个目标是调整 IndexHeader.style.width 和 IndexAlarmNameHeader.style.width ，以便动态调整到正确的宽度适应水平滚动;但是，在找出为什么 style.width 属性没有返回可用值之前，我无法继续执行此任务。在 CSS 中为引用的宽度指定了默认值，因此我对 DOM / javascript 引用不包含中指定的值的原因感到困惑CSS

为了调试此异常，我添加了一些代码来显示一些关键元素的内容（例如 IndexContainer ， IndexHeader 和 IndexListTable < / strong>）在滚动列表的第二列;列表在最终模板中将为空白（通过最终产品中的AJAX查询填写）。

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

JavaScript框架设置为 No-Library（纯JS），加载类型设置为无包装 - 在头上。我希望保持这种方式并且 避免使用JQuery （以使页面保持自包含且尽可能独立）。

由于

Answer 1

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

jsFiddle

1 个答案: