可滚动的表格不显眼的脚本

Question

这是一段在所有浏览器中都能正常工作的漂亮代码： http://www.imaputz.com/ cssStuff/bigFourVersion.html

由于需要为每个特定表格计算一些内容（滚动条的额外空间，每个单元格的固定宽度），我想创建一个 javascript 来修改表格以使其可滚动。

此类脚本已经存在，即 http://www.farinspace.com/jquery-scrollable-表插件/ 但它们都需要指定桌子的高度。我想从 CSS 中提取高度以使脚本不引人注目。

如果我将高度写为内联样式，则所有浏览器都可以读取 table.style.height 属性。但是，当使用外部样式时，

<style>
  .scrollTable { display: block; overflow: hidden; height: 200px; }
</style>

只有 Firefox 可以按预期读取 offsetHeight/clientHeight 属性。我猜其他浏览器无法将表格布局更改为阻止。

我唯一想到的就是读取外部 CSS

function getCSS(rule,prop) {
  if(!(document && document.styleSheets)) return;
  var result="", ds = document.styleSheets;
  for(var i=0; i<ds.length; i++) {
    var r = getCSS1(ds[i],rule,prop);
    if(r) result = r;
  }
  return result;
}
function getCSS1(sheet,rule,prop) {
  var rules = sheet.cssRules? sheet.cssRules: sheet.rules;
  var result = "";
  for(var i=0; i<rules.length; i++) {
    var r = rules[i].selectorText.toLowerCase();
    if(r.indexOf(rule)==-1) continue;
    if(r.lastIndexOf(rule)!=r.length-rule.length) continue;
    var p = rules[i].style[prop];
    if(p) result = p;
  }
  return result;
}

var height = getCSS(".scrollTable","height");

但高度可能会以其他方式指定：通过 id、另一个类或继承，所以我可能采用了错误的方式。还有其他方法可以猜测桌子的高度吗？我快要放弃了。

---

简而言之

我想要这段代码

<script src="scrollTable.js"></script> // load the script
<style> .scrollTable { height: 200px; } // set the CSS
<table class="scrollTable">...</table> // script should do all the tricks

我的脚本可以完成除了获取表格高度之外的所有技巧。如何提取呢？

Answer 1

为什么不将 包含在

中？这样，即使它位于外部 CSS 中，您也应该能够获取

高度。

Answer 2

通过 jQuery，您可以使用 .css() 函数：

table_height = $("table.scrollTable").css("height");

这将返回表格的高度，包括 px。因此，您可以使用其他一些 JavaScript 函数仅提取数字。

Answer 3

假设您正在使用 jQuery（您确实提到了 jQuery 插件），您可以使用 $('table.selector').height() 计算元素的高度。

Answer 4

getCompatedStyle 是答案吗？请参阅此处：http://blog.stchur.com/2006/06 /21/css-compulated-style/

Answer 5

你可以使用

document.getElementById("ID").clientHeight

设置的 height 时，它在 IE8 和 Chrome 中对我有用

• 当我测试通过html
• 内联
• 样式表

这就是我所做的：

<table height="350" id="one">
<table> 

<table style="height:400px;" id="two">
<table> 

<table class="height" id="three">
<table> 

和

alert(document.getElementById("one").clientHeight);

alert(document.getElementById("two").clientHeight);

alert(document.getElementById("three").clientHeight);

工作示例： http://jsfiddle.net/jasongennaro/h9B2j/

编辑

我认为一定有其他东西干扰了代码，如

document.getElementById( "").clientHeight;

即使没有设置高度也适用于我。

请参阅此处的另一个示例：http://jsfiddle.net/jasongennaro/h9B2j/ 2/