当我打开Google电子表格并查看Chrom开发人员工具的Elements选项卡时，我看到的电子表格单元格如下：
<div class="goog-inline-block grid4-inner-container" style="width: 1580px; height: 646px;">
<div class="waffle-background-container"> </div>
<div id="scrollable_right_1" class="uberlay" style="display: none;">
<div class="overlay-container-ltr" style="z-index: 8;"></div>
<div class="overlay-container-ltr" style="z-index: 5;"></div>
<div class="overlay-container-ltr" style="z-index: 7;"></div>
<div class="overlay-container-ltr" style="z-index: 6;"></div>
<div class="overlay-container-ltr" style="z-index: 8;"></div>
<div class="overlay-container-ltr" style="z-index: 6;"></div>
<div class="overlay-container-ltr" style="z-index: 7;"></div>
<div class="overlay-container-ltr" style="z-index: 7;"></div>
<div class="overlay-container-ltr" style="z-index: 7;"></div>
</div>
..etc... repeated 20 times
</div>这个DOM的大部分都是display：none，电子表格中的任何数据都不会在这个DOM中表示。在普通的HTML表格中不是这种情况，在我使用的任何网格组件中也不是这种情况，在这些组件中，我在屏幕上看到的每个单元格都至少由DOM中的一个节点表示。Google是如何做到这一点的？
1条答案
按热度按时间ff29svar1#
我相信所有的东西都是在Canvas元素中呈现的，你在上面找到的
<div class="goog-inline-block grid4-inner-container" ....>可能是为了别的东西。在dev控制台中，尝试
$$("canvas")，它应该为整个文档/窗口返回一个canvas对象。点击查看其属性。如果更改“top”或“left”属性，您将看到整个电子表格向上或向下、向左或向右移动。这应该回答了你的问题，但除此之外，我不知道如何检查或修改Canvas内部的元素。