上一主题 下一主题
返回列表 发新帖

向网页添加按钮为什么只有一个??

[复制链接]

2

主题

5

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2021-4-5 17:23:20 | 显示全部楼层 | 阅读模式

image.png

向网页添加按钮为什么只有一个??

https://www.btbtt.me/thread-index-fid-950-tid-4576574.htm

我用for或者while循环都不行,结果都只有最后一个被成功添加按钮,但是如果不使用循环(注释代码)就能每个都可以添加按钮。

// ==UserScript==
// @name         创建一个按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  创建一个按钮
// @author       木羊羽
// @match        www.btbtt.me/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

let download_button = document.createElement('button');
download_button.textContent = ' 下载附件';
download_button.style.color = '#fff';
download_button.style.backgroundColor = '#3280fc';
download_button.style.padding = 'inherit';
download_button.style.fontSize = 'inherit';
download_button.style.lineHeight = '1.53846154';
download_button.style.textAlign = 'center';
download_button.style.verticalAlign = 'Middle';
download_button.style.border = '1px solid transparent';
download_button.style.border = '1px solid transparent';
download_button.style.borderRadius = '4px';
download_button.style.cursor = 'pointer';

window.onload = function (){
    bolds = document.querySelectorAll('.bold');
    let i = bolds.length;
    while (i--) {
        bolds[i].appendChild(download_button);
    }
    // bolds[0].appendChild(download_button);
    // bolds[1].appendChild(download_button);
};

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

32

主题

298

帖子

469

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
469
发表于 2021-4-5 23:06:03 | 显示全部楼层
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处。如果将被插入的节点已经存在于当前文档的文档树中,那么 appendChild() 只会将它从原先的位置移动到新的位置(不需要事先移除要移动的节点)。

你插入的download_button一直是同一个
回复

使用道具 举报

2

主题

5

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2021-4-6 08:39:43 | 显示全部楼层
王一之 发表于 2021-4-5 23:06
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

Node.appendChild() 方法将一个节点 ...

大佬 那请问如何向网页添加多个按钮呢?
回复

使用道具 举报

32

主题

298

帖子

469

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
469
发表于 2021-4-6 09:13:40 | 显示全部楼层
木羊羽 发表于 2021-4-6 08:39
大佬 那请问如何向网页添加多个按钮呢?

你把let download_button = document.createElement('button');这些放循环内创建不就好了
回复

使用道具 举报

32

主题

298

帖子

469

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
469
发表于 2021-4-6 09:16:32 | 显示全部楼层
木羊羽 发表于 2021-4-6 08:39
大佬 那请问如何向网页添加多个按钮呢?

修改了一下

  1. // ==UserScript==
  2. // @name         创建一个按钮
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  创建一个按钮
  6. // @author       木羊羽
  7. // @match        http://www.btbtt.me/*
  8. // @run-at       document-end
  9. // @grant        none
  10. // ==/UserScript==


  11. window.onload = function (){
  12.     bolds = document.querySelectorAll('.bold');
  13.     let i = bolds.length;
  14.     while (i--) {
  15.         let download_button = document.createElement('button');
  16. download_button.textContent = ' 下载附件';
  17. download_button.style.color = '#fff';
  18. download_button.style.backgroundColor = '#3280fc';
  19. download_button.style.padding = 'inherit';
  20. download_button.style.fontSize = 'inherit';
  21. download_button.style.lineHeight = '1.53846154';
  22. download_button.style.textAlign = 'center';
  23. download_button.style.verticalAlign = 'Middle';
  24. download_button.style.border = '1px solid transparent';
  25. download_button.style.border = '1px solid transparent';
  26. download_button.style.borderRadius = '4px';
  27. download_button.style.cursor = 'pointer';
  28.         bolds[i].appendChild(download_button);
  29.     }
  30.     // bolds[0].appendChild(download_button);
  31.     // bolds[1].appendChild(download_button);
  32. };
复制代码
回复

使用道具 举报

65

主题

182

帖子

556

积分

高级会员

Rank: 4

积分
556
发表于 2021-4-6 12:12:31 | 显示全部楼层
创建按钮放入循环里面
回复

使用道具 举报

2

主题

5

帖子

18

积分

新手上路

Rank: 1

积分
18
发表于 2021-4-6 12:28:44 | 显示全部楼层

爱你
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表