Fatal编程技术网
  • javascript/
  • Javascript Onclick-更改元素的背景图像

Javascript Onclick-更改元素的背景图像

javascript html css

Javascript Onclick-更改元素的背景图像,javascript,html,css,Javascript,Html,Css,单击照片将执行覆盖/弹出照片。我想更改弹出式照片的背景图像，以匹配链接它的。这个问题已经被问过很多次了，但我无法拼凑出运行的代码。此外，我希望避免使用任何软件包，如果可能的话，只使用css，这将是理想的，比如 onclick="document.getElementById("photoEnlarged")style.backgroundImage = 'cardinal2'" 调用函数的div： 此网页的目录： 全部张贴： <!DOCTYPE HTML> <style>

单击照片将执行覆盖/弹出照片。我想更改弹出式照片的背景图像，以匹配链接它的。这个问题已经被问过很多次了，但我无法拼凑出运行的代码。此外，我希望避免使用任何软件包，如果可能的话，只使用css，这将是理想的，比如

onclick="document.getElementById("photoEnlarged")style.backgroundImage = 'cardinal2'"
调用函数的div：

此网页的目录：

全部张贴：

<!DOCTYPE HTML>
<style>
    html {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    body {
        background-color: #000000;
        margin: 0px;
        min-height: 100%;
        width: 100%;
        text-align: center;
    }

    .topnav {
        background-color: #000000;
        border-color: #FFFFFF;
        border-bottom-style: solid;
        border-width: 1.5px;
        height: 5.5em;
        margin-top: 10px;
        margin-bottom: 75px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }

        .topnav a {
            border-style: none;
            color: #FFFFFF;
            float: left;
            font-size: 55px;
            padding: 10px;
            text-decoration: none;
        }

            .topnav a:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav a.active {
                background-color: #FFFFFF;
                color: white;
            }

        .topnav b {
            border-style: none;
            color: #FFFFFF;
            float: right;
            font-size: 25px;
            padding: 27.5px;
            text-decoration: none;
        }

            .topnav b:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav b.active {
                background-color: #FFFFFF;
                color: white;
            }

        .imgIcon {
            border-style: none;
            float: left;
            height: 70px;
            padding: 10px;
            width: 65px;
        }

    h2 {
        color: #FFFFFF;
        font-size: 75px;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        vertical-align: middle;
        width: 97.75%;
    }

    .photosContainer {
        background: #000000;
        float: left;
        height: auto;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .photoFrame {
        display: inline-block;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        width: auto;
    }

        .imgBird {
            border-color: #FFFFFF;
            border-style: double;
            border-width: 5px;
            display: block;
            height: 210px;
            width: 350px;
            position: relative;
        }

    .textContainer {
        background: #000000;
        height: 50px;
        margin-left: 1.25%;
        margin-right: 1.25%;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        width: auto;
    }

    #cover { 
        position: fixed; 
        top: 0; 
        left: 0; 
        background: #000000; 
        z-index: 5; 
        width: 100%; 
        height: 100%; 
        display: none;
    }

    #photoEnlarged { 
        height: 635px; 
        width: 850px; 
        margin: 0 auto;
        position: relative; 
        z-index: 10; 
        display: none; 
        background: url(Cardinal1.jpg);
        background-size: cover; 
        border-color: #FFFFFF;
        border-style: double;
        border-width: 5px;
    }

        #photoEnlarged:target, #photoEnlarged:target + #cover {
            display: block;
            opacity: 2;
        }

    .cancel { 
        background: #000000;
        color: #FFFFFF; 
        display: block;
        font-size: 30px;
        font-weight: bold; 
        position: absolute; 
        top: 3px; 
        right: 2px; 
        height: 30px;
        width: 30px; 
        text-decoration: none; 
        text-align: center;
    }
</style>
<html>
<body>
    <div class="topnav">
        <img class="imgIcon" src="Owl.jpg" alt="Owl">
        <a href="#about">Birds</a>
        <b href="#contact">Code</b>
        <b href="#radio">Radio</b>
        <b href="#news">Resume</b>
    </div>

    <h2>C A R D I N A L</h2>

    <div class="photosContainer">
        <div class="photoFrame">
            <a onclick="myFunction('Cardinal2.jpg')" href="#photoEnlarged">
                <img class="imgBird" src="Cardinal1.jpg">
            </a>
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal2.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal3.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal4.jpg">
        </div>
    </div>
    <div id="photoEnlarged">
        <a href="#" class="cancel"> &times; </a>
    </div>
    <div id="cover"></div>
    <br><br><br><br><br><br>
    <script>
        function myFunction(newURL) {
            var x = document.getElementById("photoEnlarged");
            x.style.backgroundImage = URL(newURL);
        };
    </script>
</body>
</html>
看看现有的CSS：

现在查看您正在分配的值：

您遗漏了url部分和文件扩展名

关于您的编辑：

JavaScript URL函数将创建一个新的URL对象

你不会想要的

您需要一个带有url的字符串，并在开头和结尾

x.style.backgroundImage = "url(" + newURL + ")";
我假设您正在尝试更改页面的背景图像，以匹配特定图像的单击事件。为此，您需要使用JavaScript。我附上一个样本，说明如何可以实现这一点

var imageClass=document.getElementsByClassName'image-class'； console.logimageClass[1]； forvar i=0；i这正是我最终使用的函数/调用：

职能：

调用函数：

这是一个奇怪的Java版本…@Kobe lmao我改变了它，它覆盖了背景image@Rojo-不在id为的元素中photoEnlarged@Rojo将其全部发布以避免混淆。放大后的照片在本章末尾宣布body@Rojo-由于所述原因，这两种方法都不起作用，但仍然没有go@learnAsWeGo-你没把它们修好。请参阅对此答案的编辑。 
#photoEnlarged { 
    height: 635px; 
    width: 850px; 
    margin: 0 auto;
    position: relative; 
    z-index: 10; 
    display: none; 
    background: url(Cardinal1.jpg);
    background-size: cover; 
    border-color: #FFFFFF;
    border-style: double;
    border-width: 5px;
}

<!DOCTYPE HTML>
<style>
    html {
        margin: 0px;
        height: 100%;
        width: 100%;
    }

    body {
        background-color: #000000;
        margin: 0px;
        min-height: 100%;
        width: 100%;
        text-align: center;
    }

    .topnav {
        background-color: #000000;
        border-color: #FFFFFF;
        border-bottom-style: solid;
        border-width: 1.5px;
        height: 5.5em;
        margin-top: 10px;
        margin-bottom: 75px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }

        .topnav a {
            border-style: none;
            color: #FFFFFF;
            float: left;
            font-size: 55px;
            padding: 10px;
            text-decoration: none;
        }

            .topnav a:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav a.active {
                background-color: #FFFFFF;
                color: white;
            }

        .topnav b {
            border-style: none;
            color: #FFFFFF;
            float: right;
            font-size: 25px;
            padding: 27.5px;
            text-decoration: none;
        }

            .topnav b:hover {
                background-color: #FFFFFF;
                color: black;
            }

            .topnav b.active {
                background-color: #FFFFFF;
                color: white;
            }

        .imgIcon {
            border-style: none;
            float: left;
            height: 70px;
            padding: 10px;
            width: 65px;
        }

    h2 {
        color: #FFFFFF;
        font-size: 75px;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        vertical-align: middle;
        width: 97.75%;
    }

    .photosContainer {
        background: #000000;
        float: left;
        height: auto;
        margin-bottom: 50px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
        text-align: center;
        width: 100%;
    }

    .photoFrame {
        display: inline-block;
        height: auto;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 25px;
        padding-right: 25px;
        width: auto;
    }

        .imgBird {
            border-color: #FFFFFF;
            border-style: double;
            border-width: 5px;
            display: block;
            height: 210px;
            width: 350px;
            position: relative;
        }

    .textContainer {
        background: #000000;
        height: 50px;
        margin-left: 1.25%;
        margin-right: 1.25%;
        position: relative;
        padding-left: 5px;
        padding-right: 5px;
        width: auto;
    }

    #cover { 
        position: fixed; 
        top: 0; 
        left: 0; 
        background: #000000; 
        z-index: 5; 
        width: 100%; 
        height: 100%; 
        display: none;
    }

    #photoEnlarged { 
        height: 635px; 
        width: 850px; 
        margin: 0 auto;
        position: relative; 
        z-index: 10; 
        display: none; 
        background: url(Cardinal1.jpg);
        background-size: cover; 
        border-color: #FFFFFF;
        border-style: double;
        border-width: 5px;
    }

        #photoEnlarged:target, #photoEnlarged:target + #cover {
            display: block;
            opacity: 2;
        }

    .cancel { 
        background: #000000;
        color: #FFFFFF; 
        display: block;
        font-size: 30px;
        font-weight: bold; 
        position: absolute; 
        top: 3px; 
        right: 2px; 
        height: 30px;
        width: 30px; 
        text-decoration: none; 
        text-align: center;
    }
</style>
<html>
<body>
    <div class="topnav">
        <img class="imgIcon" src="Owl.jpg" alt="Owl">
        <a href="#about">Birds</a>
        <b href="#contact">Code</b>
        <b href="#radio">Radio</b>
        <b href="#news">Resume</b>
    </div>

    <h2>C A R D I N A L</h2>

    <div class="photosContainer">
        <div class="photoFrame">
            <a onclick="myFunction('Cardinal2.jpg')" href="#photoEnlarged">
                <img class="imgBird" src="Cardinal1.jpg">
            </a>
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal2.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal3.jpg">
        </div>
        <div class="photoFrame">
            <img class="imgBird" src="Cardinal4.jpg">
        </div>
    </div>
    <div id="photoEnlarged">
        <a href="#" class="cancel"> &times; </a>
    </div>
    <div id="cover"></div>
    <br><br><br><br><br><br>
    <script>
        function myFunction(newURL) {
            var x = document.getElementById("photoEnlarged");
            x.style.backgroundImage = URL(newURL);
        };
    </script>
</body>
</html>

url(Cardinal1.jpg)

cardinal2

 x.style.backgroundImage = URL(newURL);

x.style.backgroundImage = "url(" + newURL + ")";

<head>
    <script>
        function changeImg(imgURL) {
            document.getElementById('photoEnlarged').style.backgroundImage = 'url(' + imgURL +' )';
        }
    </script>
</head>

    <div class="photoFrame">
        <a onclick="changeImg('YellowCrownedNightHeron1.jpg')" href="#photoEnlarged">
            <img class="imgBird" src="YellowCrownedNightHeron1.jpg">
        </a>
    </div>