JS精确操作css-doodle单元格

马黑黑

css-doodle 基于 Shadow DOM，以自定义HTML元素即 <css-doodle> 作为外标签，封装成用于创作涂鸦艺术的 Web 组件。DOM 是文档对象模型，通俗一点理解就是一个 Web 页的目录树。在一个DOM（目录树）里，再嵌入相对封闭和独立的 DOM（目录树），这叫影子目录树（Shadow DOM）。影子目录树是一个小天地里的 DOM，它里面的子元素可以对外开放（open），也可以封闭（close），css-doodle 定义为开放（open）。之前，我们想通过 JS 在外部精准操控 css-doodle 里面的每一个单元格几乎束手无策，经研究一番 Shadow DOM 之后，其实方法也很简单，以下演示就是展现如何在外部精准定位 css-doodle 内部各单元格的 JS 路径并操控它们，从而，点击每一个单元格，该单元格都会随机改变背景颜色——

:doodle {@size: 400px; gap: 1px;} background: gray;

马黑黑

代码

1. <css-doodle grid="4" id="dd">
   
2.         :doodle {@size: 400px; gap: 1px;}
   
3.         background: gray;
   
4. </css-doodle>
   
5. 
   
6. <script>
   
7. let script = document.createElement('script');
   
8. script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
   
9. document.head.appendChild(script);
   
10. 
    
11. window.onload = () => {
    
12.         let cells = dd.shadowRoot.querySelectorAll("cell");
    
13.         console.log(cells);
    
14.         cells.forEach( (item) => {
    
15.                 item.onclick = () => item.style.background = `#${Math.random().toString(16).substr(-6)}`;
    
16.         });
    
17. };
    
18. </script>

复制代码

马黑黑

代码解释


11-17行是我们处理问题的关键。首先，文档需要准备就绪，我们才能对影子目录树进行遍历，所以——

window.onload = () => {
    //核心代码
};

是必须的，它表示文档加载完毕后再运行核心代码。其次，解决问题。

核心代码中，第 12 行，

let cells = dd.shadowRoot.querySelectorAll("cell");

shadowRoot 指影子目录树的根，我们是在 id="dd" 的 css-doodle 元素里进行操作，dd 是常规DOM目录树的成员，影子DOM的根指向它；然后，我们查询的是其内标签名为 cell 的东东，这就是 css-doodle 所有单元格的最终标签名，它们还有自己的 id ，需要时也可以通过 id 进行查询。

第 13 行验证一下 cells 变量是否成功赋值，可以不要。

第 14-16行，

        cells.forEach( (item) => {
                item.onclick = () => item.style.background = `#${Math.random().toString(16).substr(-6)}`;
        });



遍历所有的 cells（单元格）变量，令其在被单击时随机改变背景颜色。

南无月

关于JS，溜了溜了，看不懂。。。

红影

奇怪，本来一个个点击很开心，但是评分后就点不动了，刷新也点不动

红影

哦，我太急了，刷新后那圆圈还在转我就开始点击了。现在圆圈转停了，可以变色了

红影

“签名为 cell 的东东，这就是 css-doodle 所有单元格的最终标签名。”
把这个赋值给shadowRoot是关键，然后就可以对所有单元格进行操作了吧。

“它们还有自己的 id ，需要时也可以通过 id 进行查询。”
这个不知道是怎么用出来的。

樵歌

各种颜色。不知道对我有用处不

马黑黑

樵歌 发表于 2023-6-7 19:50
各种颜色。不知道对我有用处不

我也不清楚

马黑黑

南无月 发表于 2023-6-7 18:23
关于JS，溜了溜了，看不懂。。。

没有JS，就没有播放/暂停

马黑黑

醉美水芙蓉 发表于 2023-6-7 19:42
进来瞧瞧！

不知道瞧见了啥

马黑黑

红影 发表于 2023-6-7 18:27
奇怪，本来一个个点击很开心，但是评分后就点不动了，刷新也点不动

这个没有考虑评分后的操作

马黑黑

红影 发表于 2023-6-7 18:33
“签名为 cell 的东东，这就是 css-doodle 所有单元格的最终标签名。”
把这个赋值给shadowRoot是关键，然 ...

这个有css-doodle自己的规范，必须深入研究才能感悟

马黑黑

红影 发表于 2023-6-7 18:29
哦，我太急了，刷新后那圆圈还在转我就开始点击了。现在圆圈转停了，可以变色了

网速问题了

红影

马黑黑 发表于 2023-6-7 20:05
这个没有考虑评分后的操作

嗯，评分后需要刷新才行。

红影

马黑黑 发表于 2023-6-7 20:06
这个有css-doodle自己的规范，必须深入研究才能感悟

这个就很棒，每次点击都会变色，每个框都行的。

红影

马黑黑 发表于 2023-6-7 20:07
网速问题了

是的，打开的网页太多了

马黑黑

红影 发表于 2023-6-7 21:53
是的，打开的网页太多了

资源耗尽

马黑黑

红影 发表于 2023-6-7 21:52
这个就很棒，每次点击都会变色，每个框都行的。

精准控制了