向页面注入js实现为图片和文字元素添加透明蒙层

var a=document.createElement('script');
a.src="http://127.0.0.1:8080/index.js";
window.document.head.append(a)

1
2
3

    function addImgCover(img, bgc = 'rgba(255,0,0,0.2)') {
        // 如果有蒙层，则直接新的颜色
        if (img.getAttribute('cover')) {
            img.nextElementSibling.style.backgroundColor = bgc
            return
        }

        // 标记已经添加过蒙层
        img.setAttribute('cover', '1')

        const divParent = document.createElement('div')
        divParent.style.position = 'relative'

        const divChild = document.createElement('div')
        divChild.style.position = 'absolute'
        divChild.style.top = '0'
        divChild.style.width = '100%'
        divChild.style.height = '100%'
        divChild.style.backgroundColor = bgc

        divParent.appendChild(img.cloneNode())
        divParent.appendChild(divChild)

        img.replaceWith(divParent)
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    function addBgImgCover(bgImg, bgc = 'rgba(255,0,0,0.2)') {
        // 如果有蒙层，则直接新的颜色
        if (bgImg.getAttribute('cover')) {
            bgImg.children[0].style.backgroundColor = bgc
            return
        }

        // 标记已经添加过蒙层
        bgImg.setAttribute('cover', '1')

        const divChild = document.createElement('div')
        divChild.style.width = '100%'
        divChild.style.height = '100%'
        divChild.style.backgroundColor = bgc
        bgImg.appendChild(divChild)
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function addTextCover(textEl, bgc = 'rgba(255,0,0,0.2)') {
    textEl.style.backgroundColor = bgc
}

1
2
3

    function judgeBgImgEl(el) {
        return el && !!el.style.backgroundImage
    }
    function getAllImgEls() {
        // 常规的
        const imgs = document.querySelectorAll('img')

        // 递归获取非常规的
        const getBgIms = (el = document.body) => {
            const res = []
            if (el.childElementCount > 0) {
                Array.from(el.children).forEach(v => {
                    res.push(...getBgIms(v))
                })
            }
            if (judgeBgImgEl(el)) {
                res.push(el)
            }
            return res
        }
        const bgImgs = getBgIms()
        return {
            imgs,
            bgImgs
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function getAllTextEls() {
    // 递归获取
    const getTextEls = (el = document.body) => {
        const res = []
        if (el.childElementCount === 0) {
            el.textContent.trim().length !== 0 && res.push(el)
        } else {
            Array.from(el.children).forEach(e => {
                res.push(...getTextEls(e))
            })
        }
        return res
    }
    return getTextEls()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    let theme = 'red'

    // 主题切换
    window.addEventListener('visibilitychange', (e) => {
        if (document.hidden) {
            theme = theme === 'red' ? 'blue' : 'red'
            changeTheme(theme)
        }
    })

1
2
3
4
5
6
7
8
9

粥里有勺糖

Choose mode

向页面注入js实现为图片和文字元素添加透明蒙层

向页面注入js实现为图片和文字元素添加透明蒙层

# 向页面注入js实现为图片和文字元素添加透明蒙层

# 背景

# 注入js

# 图片高亮

# 情况一

# 情况二

# 文字高亮

# 获取所有图片元素

# 获取所有文本元素

# 监听页面显/隐

# 最后