动态页面图片替换

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}

img {
    width: 300px;
    height: 325px;
}

</style>

<body>
<img src="./img/1212.jpg" alt="0">
<p>asdfasdf </p>
<img src="./img/1212.jpg" alt="1">
<p>sdfasdfasdf</p>
<img src="./img/1212.jpg" alt="2">
<p>sdfasdfasdfasdf</p>
<p contenteditable="false">asdfasdfasdf</p>
</body>
<script>
window.onload = function () {
creatReplace()
function creatReplace() {
var img = document.getElementsByTagName('img')
var pS = document.getElementsByTagName('p')
var label = document.getElementsByTagName('label')
var nlabel, divS, divSs, inputS
for (var i = 0; i < img.length; i++) {
// 创建标签
nlabel = document.createElement('label')
divS = document.createElement('div')
inputS = document.createElement('input')
// 设置属性
divS.setAttribute('class', 'dw')
divS.style.position='relative'
divS.style.display='inline-block'
nlabel.setAttribute('for', 'album' + i + '')
nlabel.style.width = img[i].width + 'px'
nlabel.style.height = img[i].height + 'px'
nlabel.style.position = 'absolute'
nlabel.style.top = '0'
nlabel.style.left = '0'
inputS.id = 'album' + i + ''
inputS.name = 'file'
inputS.type = 'file'
inputS.accept = 'image/*'
inputS.style.display = 'none'

            // 添加标签
            divSs = img[i].parentNode.insertBefore(divS, img[i])
            divSs.appendChild(img[i])
            insertAfter(nlabel, img[i])
            insertAfter(inputS, label[i])

            // 替换图片
            inputS.onchange = function () {
                ImagePath = window.URL.createObjectURL(this.files[0]);
                this.parentNode.firstChild.src = ImagePath
            }
        }
        for (let j = 0; j < pS.length; j++) {
            pS[j].contentEditable = "true"
        }
        // 标签后面插入元素
        function insertAfter(newElement, targetElement) { 
            var parent = targetElement.parentNode; 
            if (parent.lastChild == targetElement) { 
                parent.appendChild(newElement, targetElement);
            } else {
                parent.insertBefore(newElement, targetElement.nextSibling);
            };
        }
    }


}

</script>

</html>

动态页面图片替换

推荐阅读更多精彩内容