Question

以下是适用于所有浏览器的优秀代码：http://www.imaputz.com/cssStuff/bigFourVersion.html

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

此类脚本已存在，即http://www.farinspace.com/jquery-scrollable-table-plugin/ 但是他们都需要指定表的高度。我想从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

为什么不将<table>括在<div>中？这样，即使它位于外部CSS中，您也应该能够获得<div>高度。

Answer 2

使用 jQuery ，您可以使用.css()功能：

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

这将返回包含px的表格的高度。因此，您只能使用其他一些javascript函数提取数字。

Answer 3

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

Answer 4

getComputedStyle是答案吗？见这里：http://blog.stchur.com/2006/06/21/css-computed-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/

可滚动表不显眼的脚本

5 个答案: