动态页面图片替换
<!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>
