在 Dart 中，如何获取表格单元格的宽度？答案

【问题标题】：In Dart, how do I get the width of a table cell?在 Dart 中，如何获取表格单元格的宽度？
【发布时间】：2015-05-10 22:23:22
【问题描述】：

好的，似乎有很多与此主题相关的问题+答案，但我找不到准确的答案，主要是因为它们似乎与设置单元格宽度有关。我对此不感兴趣。如有遗漏请见谅！

我想在尚未设置宽度的单元格中绘制画布。

我有一个 TableCellElement CELL，我可以很好地显示 innerHTML。但是我想给 CELL 添加一个子画布，所以我需要单元格的宽度。

CELL.style.width、CELL.clientWidth、CELL.client 等总是返回零。

这可能是 Dart 的错误，是我做错了，还是不可能？我应该找到单元格所在的列（如何？），然后找到它的宽度吗？
干杯
史蒂夫

【问题讨论】：

标签： html dart dart-html

【解决方案1】：

index.html

<!DOCTYPE html>

<html>
  <head>
    <style>
      table,td {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td id="id1">xxx</td><td id="id2">yyyy</td><td id="id3"></td>
      </tr>
    </table>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

index.dart

import 'dart:html';

void main() {
  printWidth('id1');
  printWidth('id2');
  printWidth('id3');
}

printWidth(String id) {
  print('${id}:');
  CssStyleDeclaration elem = querySelector('#${id}').getComputedStyle();

  print('width: ${elem.width}');
  print('borderLeftWidth: ${elem.borderLeftWidth}');
  print('borderRightWidth: ${elem.borderRightWidth}');
  print('paddingLeft: ${elem.paddingLeft}');
  print('paddingRight: ${elem.paddingRight}');
}

打印

id1:
width: 24px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px
id2:
width: 32px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px
id3:
width: 0px
borderLeftWidth: 1px
borderRightWidth: 1px
paddingLeft: 1px
paddingRight: 1px

【讨论】：

嗨，甘特，非常感谢。我的表是完全生成/动态的 - 我只在 html 文件中定义
。我尝试设置 cell.id='#a'+cell.hashcode.toString() （当我创建单元格时）。然后我使用你上面的方法，但是返回的“elem”总是为空。我在设置 cell.id 后立即调用它。 :(干杯，史蒂夫
# 是选择器的一部分，而不是 id。 # 是告诉 querySelector 它应该寻找 id，而不是标签名称。查看我的代码，仅在 Dart 代码中使用了#，但在 HTML 部分中没有使用。
嗨，对不起，我的错字在这里。我的代码是呃......“正确”。但我现在尝试了 cell.id=''A"+hashcode.tostring() 和查询作为 querySelector('#${id}')。没有变化。
我不确定你最后的评论是什么意思。现在对你有用吗？
你好，甘特。谢谢你一直陪着我！不，它不起作用。我仍然得到一个空元素。我尝试了一些变化。我将进一步发挥，并将一个单元元素 id 设置为可识别的东西，并尝试检索它。可能是 shadowRoot 问题。当我找到解决方案时，我会报告。干杯，史蒂夫

【解决方案2】：

这对我有用：

      cell.contentEdge.width;

【讨论】：