如何从 javascript 函数结果中设置 CSS 宽度？

Question

我在 div 包装器中有一个 GridView，左侧有一些行标题需要始终可见。到目前为止，这一切都有效，但我需要包装器具有可变宽度以适应浏览器大小。

我使用一些 javascript 根据浏览器宽度获得了所需的包装器宽度，但我不知道如何将此宽度设置为 wrapper.width。
它不必在页面加载后更新包装器宽度或检查浏览器调整大小。

我在图表方面的糟糕尝试：

|   |column headers      |
| R |--------------|      
| O | gridview data      |
| W |              |      
|   |  this part         |
| H |  will scroll |<--->
| E |  while the         |
| A |  Row headers |
| D |  stay there        |
| E |              |
| R |______________      |
| S | scroll bar   |

asp:(见下面的编辑)

<pseudocode>
 <table>
   <tr><td>row headers</td>
       <td><div class="Wrapper">
              <asp:GridView>dataBind()</asp:gridview>
       </div></td></tr>
 </table>
</pseudocode>

css:

div.Wrapper 
{
 width:800px;<--this needs to change based on the browser width
 overflow: auto;
}

javascript：

var Width = window.innerWidth - 275 || document.body.clientWidth - 275

我要么需要一种设置 wrapper.width = Width 的方法，要么需要一种完全不同且希望更好的方法来实现这一点。

我尝试使用 % 作为宽度，但它没有将浏览器窗口用作 100%，它占用了整个 GridView 的整个宽度的 %，这对我没有任何作用。

提前感谢您的帮助。

编辑：添加了一些代码

<script type="text/javascript">
    var Width = window.innerWidth - 275 || document.body.clientWidth - 275;
    var divElement = document.getElementById("wrappist");
<!--I tried a few different things at this point, here are a couple of them-->
    divElement.offsetWidth = "80px";
    divElement.style.width = Width.toString() + 'px'; 
</script>

<div runat="server" id="wrappist" class="Wrapper">
  <asp:GridView runat="server" ID="ALPGrid" CssClass="Grid"
       CellPadding="5" GridLines="Both" AutoGenerateColumns="false"
       OnRowDataBound="ALP_RowDataBound" OnRowCreated="ALP_RowCreated"
       DataKeyNames="ItemID">
  <HeaderStyle CssClass="GridHeader" />
  <RowStyle CssClass="Row" />
  <columns>column stuff in here</columns>
  </asp:GridView>
</div>

Answer 1

试试这个：

var Width = window.innerWidth - 275 || document.body.clientWidth - 275
var divElement = document.getElementById('idOfDiv');
d.style.width = Width.toString() + 'px';

编辑：忘记解释了。这会设置元素上 div 内联的宽度，因此它将覆盖您的类中的样式。

Answer 2

纯 CSS 解决方案怎么样？

<div class="wrapper">
<div class="row_headers"></div>
<div class="grid"></div>
</div>

CSS

.wrapper
{
width:800px; /*remove/change */
}
.row_headers
{
float:left;
width:100px; /*keep same as .grid margin-left */
height:300px;
background-color:#333;
padding-bottom:16px;
}
.grid
{
margin-left:100px; /*keep same as .row_headers width */
height:300px;
padding-bottom:16px;
background-color:#ddd;
overflow:auto;
}