我有一个表是div的集合。我有一个标题div和一个div(单元格)。基本上我想用javascript来计算标题div的宽度和项目div的宽度(落在标题列中),看看哪个更大。无论哪个更大,都必须为标题和项目设置最大宽度。
由于我是javascript的新手,我不知道如何从样式中调用javascript函数。例如:我想说:
<div id="Header1_div" style="width: CalculateWidth(); display: inline-block">Header 1</div>
这是javascript和html代码:
请告诉我如何实现预期目标。提前谢谢。
function InitApp()
{
var gridHeight = 400;
var gridWidth = 500;
var scrollBarWidth = getScrollSizes(); //get scroll bar's width.
$("#div-header").css("width", (gridWidth - scrollBarWidth) + "px");
$("#div-header-hack").css("width", (scrollBarWidth) + "px");
$("#div-item").css("width", (gridWidth) + "px");
$("#div-header-hack").css("left", (gridWidth - scrollBarWidth) + "px");
$("#div-item").css("max-height", (gridHeight) + "px");
}
function ScrollHeader()
{
$("#div-header").scrollLeft($("#div-item").scrollLeft());
}
function getScrollSizes()
{
// call after document is finished loading
var el= document.createElement('div');
el.style.display= 'hidden';
el.style.overflow= 'scroll';
document.body.appendChild(el);
var h= el.offsetHeight-el.clientHeight;
document.body.removeChild(el);
return h;
}
&#13;
<HTML>
<head>
<script type="text/javascript" src="table.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body id="doc-body" style="width: 100%; height: 100%; overflow: hidden; position: fixed" onload="InitApp()">
<div>
<div id="div-header" style="position: absolute; top: 0px; overflow: hidden; height: 20px; background-color: gray">
<div style="min-width: 1000px;">
<div id="Header1_div" style="width: 120px; display: inline-block">Header 1</div>
<div id="Header2_div" style="width: 180px; display: inline-block">Header 2</div>
<div id="Header3_div" style="width: 120px; display: inline-block">Header 3</div>
<div id="Header4_div" style="width: 190px; display: inline-block">Header 4</div>
<div id="Header5_div" style="width: 250px; display: inline-block">Header 5</div>
<div id="Header6_div" style="width: 120px; display: inline-block">Header 6</div>
</div>
</div>
<div id="div-item" style="position: absolute; top: 20px; overflow: auto" onscroll="ScrollHeader()">
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
<div style="min-width: 1000px; background-color: #D7BDEC; padding: 10px 0px 0px 0px; border-bottom: 1px solid gray">
<div id = "Item1_div" style="width: 120px; display: inline-block">Item 1</div>
<div id = "Item2_div" style="width: 180px; display: inline-block">Item 2</div>
<div id = "Item3_div" style="width: 120px; display: inline-block">Item 3</div>
<div id = "Item4_div" style="width: 190px; display: inline-block">Item 4</div>
<div id = "Item5_div" style="width: 250px; display: inline-block">Item 5</div>
<div id = "Item6_div" style="width: 120px; display: inline-block">Item 6</div>
</div>
</div>
</div>
</body>
</HTML>
&#13;