Question

基本上，我有很多图像链接，我希望这些链接能够触发固定的重叠样式，但是基于点击的图像链接会显示一个独特的图像。

<img src="../Images/square 300/Drawing/angel face300.jpg" style='height: 300px; width: 300px;' onclick="imageurls(this, '../Images/A4/drawing/angel face.jpg')" />

^^一个基本图像链接w / 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()">&times;</a>
</div>

我所有的css样式都能很好地工作，如果我只使用document.get.element ....并删除var x和y，那么叠加层就能正常工作。

Answer 1

变量声明是错误的。像这样使用

     var x = document.createElement("IMG")
     var y = document.createElement("DIV")

在变量声明后应用样式。

删除var 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()">&times;</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')" />

基于溢出链接的图像变量

1 个答案: