通过JS动态控制网站一键置灰

最新推荐文章于 2023-10-19 16:30:13 发布

困困的果果头

最新推荐文章于 2023-10-19 16:30:13 发布

阅读量686

点赞数 1

分类专栏： js css 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_36687211/article/details/128873319

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

<el-button @click="handleChangeGray">一键置灰</el-button>

通过控制添加节点删除节点的方式达到一键置灰效果

/**控制一键置灰 */
handleChangeGray(){
    this.isGraying = !this.isGraying
    this.handleGraying(this.isGraying)
},
/**网页一键置灰 */
handleGraying(isGraying){
    if(isGraying){
        // 追加样式
        let garyStyle = document.createElement('style') 
        garyStyle.id = "htmlStyle"
        garyStyle.appendChild(document.createTextNode(
            `html{
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                -moz-filter: grayscale(100%);
                -ms-filter: grayscale(100%);
                -o-filter: grayscale(100%);
            }`
        )) 
       document.head.appendChild(garyStyle)
    }
    else{
        // 移除样式
        let htmlStyle = document.getElementById('htmlStyle')
        htmlStyle && htmlStyle.parentNode.removeChild(htmlStyle)
    }
}