基于通过溢出链接的图像变量
基于通过溢出链接的图像变量
提问于 2017-05-03 18:17:43
基本上，我有很多的图像链接，我希望这些链接触发一个固定的重叠样式，但一个独特的图像基于图像链接点击。
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />^^一个带有onclick的基本图像链接
<script>
function imageurls(elem, imgurl) {
var y = document.createElement("DIV").style.width = "100%";
y.class = "overlay-content"
var x = document.createElement("IMG").style.width = "100%";
x.setAttribute("src", imgurl);
x.setAttribute("width", "900");
x.setAttribute("height", "900");
x.setAttribute("alt", "_blank");
y.appendChild(x);
document.getElementById("Imagediv").appendChild(y).style.width = "100%";
}
function closeNav() {
document.getElementById("Imagediv").style.width = "0%";
}
</script>^^我的java脚本，问题似乎出在哪里，但我不确定是哪方面的问题。
<div id="Imagediv" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>我所有的css样式都工作得很好，如果我只使用document.get.element...然后去掉变量x和y，覆盖就行了。
Stack Overflow用户
发布于 2017-05-03 18:20:47
变量声明是错误的.use，像这样
var x = document.createElement("IMG")
var y = document.createElement("DIV")在变量声明之后应用样式。
删除变量x和y覆盖功能。
因为变量声明错误，所以没有将attributes附加到新创建的元素中
function imageurls(elem, imgurl) {
var y = document.createElement("DIV")
y.style.width = "100%";
y.class = "overlay-content"
var x = document.createElement("IMG")
x.style.width = "100%";
x.setAttribute("src", imgurl);
x.setAttribute("width", "900px");
x.setAttribute("height", "900px");
x.setAttribute("alt", "_blank");
y.appendChild(x);
document.getElementById("Imagediv").appendChild(y).style.width = "100%";
console.log(document.getElementById('Imagediv').innerHTML)
}
function closeNav() {
document.getElementById("Imagediv").style.width = "0%";
}<div id="Imagediv" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43757261
复制相关文章
相似问题
腾讯云开发者
