马黑黑 发表于 2023-6-7 13:11

JS精确操作css-doodle单元格

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

<css-doodle grid="4" id="dd">
        :doodle {@size: 400px; gap: 1px;}
        background: gray;
</css-doodle>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);

window.onload = () => {
        let cells = dd.shadowRoot.querySelectorAll("cell");
        console.log(cells);
        cells.forEach( (item) => {
                item.onclick = () => item.style.background = `#${Math.random().toString(16).substr(-6)}`;
        });
};
</script>

马黑黑 发表于 2023-6-7 13:11

代码<css-doodle grid="4" id="dd">
        :doodle {@size: 400px; gap: 1px;}
        background: gray;
</css-doodle>

<script>
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.head.appendChild(script);

window.onload = () => {
        let cells = dd.shadowRoot.querySelectorAll("cell");
        console.log(cells);
        cells.forEach( (item) => {
                item.onclick = () => item.style.background = `#${Math.random().toString(16).substr(-6)}`;
        });
};
</script>

马黑黑 发表于 2023-6-7 13:12

本帖最后由 马黑黑 于 2023-6-7 13:26 编辑

代码解释


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（单元格）变量，令其在被单击时随机改变背景颜色。

南无月 发表于 2023-6-7 18:23

关于JS，溜了溜了，看不懂。。。{:4_170:}

红影 发表于 2023-6-7 18:27

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

红影 发表于 2023-6-7 18:29

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

红影 发表于 2023-6-7 18:33

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

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

醉美水芙蓉 发表于 2023-6-7 19:42

樵歌 发表于 2023-6-7 19:50

各种颜色。不知道对我有用处不{:4_189:}

马黑黑 发表于 2023-6-7 20:01

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

我也不清楚

马黑黑 发表于 2023-6-7 20:04

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

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

马黑黑 发表于 2023-6-7 20:05

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

不知道瞧见了啥

马黑黑 发表于 2023-6-7 20:05

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

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

马黑黑 发表于 2023-6-7 20:06

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

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

马黑黑 发表于 2023-6-7 20:07

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

网速问题了

红影 发表于 2023-6-7 21:51

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

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

红影 发表于 2023-6-7 21:52

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

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

红影 发表于 2023-6-7 21:53

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

是的，打开的网页太多了{:4_173:}

马黑黑 发表于 2023-6-7 22:08

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

资源耗尽

马黑黑 发表于 2023-6-7 22:08

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

精准控制了
页: [1] 2 3 4 5
查看完整版本: JS精确操作css-doodle单元格