油猴插件 | JS实现当前网页添加固定按钮

最新推荐文章于 2024-12-04 22:01:30 发布

罗名扬

最新推荐文章于 2024-12-04 22:01:30 发布

阅读量5.4k

点赞数 6

分类专栏：效率文章标签： javascript 前端 css

效率专栏收录该内容

6 篇文章 1 订阅

订阅专栏

本文介绍了如何借助油猴Tampermonkey插件，通过JavaScript代码在当前网页上创建一个固定位置的自定义按钮。关键步骤包括创建div元素，设置样式如position、left、top和z-index，以及将按钮元素添加到body中，以实现高优先级的浮动效果。

摘要由CSDN通过智能技术生成

借助油猴插件，在当前网页添加固定按钮

当需要增强当前网页的按钮时，我们需要添加按钮实现特定功能，这个可以使用js代码实现，在代码实现过程中发现，style的一个属性z-index需要特定方式实现，详见下文：

let Container = document.createElement('div');      
Container.id = "sp-ac-container";    
Container.style.position="fixed"       
Container.style.left="220px"
Container.style.top="20px"
Container.style['z-index']="999999"
Container.innerHTML =`<button id="myCustomize" style="position:absolute; left:30px; top:20px">
  浮动按钮
</button>
`

document.body.appendChild(Container);