从JavaScript打印图片

Question

I´m trying to print two pictures 24 times in a christmas calendar. 我正在圣诞节日历中尝试两次打印两张图片。 The pictures I´m trying to print are innhold.gif and luke.jpg. 我要打印的图片是innhold.gif和luke.jpg。 When you click on luke.gif it´s supposed to change to innhold.gif. 当您单击luke.gif时，它应该更改为innhold.gif。 This is gonna happen in sirkel-div. 这将在sirkel-div中发生。 But it´s only white. 但这只是白色。 I can´t find out whats wrong either by myself or by inspect in Google chrome. 我自己或通过Google chrome检查都无法找出问题所在。

My question is, how can I change this code so when people click on luke.jpg it changes to innhold.gif? 我的问题是，如何更改此代码，以便当人们单击luke.jpg时将其更改为innhold.gif？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">


<title>Westerdals julekalender 2017 - Din julekalender</title>

    </head>
    <body>

    <!--Header-->
    <header>
        <h1>Westerdals julekalender 2017</h1>
    </header>

   <!--Meny-->
    <nav>
        <ul>
            <li><a href="julekalender_side1.html">Forsiden</a></li>
            <li><a href="julekalender_side2.html">Din julekalender</a></li>
        </ul>
    </nav>

    <!--Content from cookie-->          
        <section>
            <p id="cookie-innhold">Her kommer cookie-innhold</p>
        </section>

    <!--Kalenderen-->
    <div id="kalender-div">

        <p id="peker-info"></p>

    </div>

    <div id="luke-div"></div>   

    <script>
    (function(){

    //Array
    let tekstArray = document.cookie.split("=");
    let tekst = tekstArray[1];

    let SirkelDiv = document.getElementById("sirkel-div");

    let body = document.getElementsByTagName("body")[0];
    let html = document.documentElement;

    document.getElementById("cookie-innhold").innerHTML = " " + tekst;



    //Style av kalender
    for(let i = 0; i < 24; i++){
        let nySirkel = document.createElement("div");
        nySirkel.style.cssText = "width: 300px; height: 300px; backround-image: url('images/innhold.gif');";
        nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;";
        nySirkel.style.cssText += "border-radius: 50%; float: left; margin:      5px;";

        nySirkel.innerHTML = (i + 1);

        nySirkel.onclick = openLuke;

        body.appendChild(nySirkel);
    }

    function openLuke(){
        this.style.backgroundImage = "url('images/luke.jpg');";
    }


    }());//End function
    </script>

    </body>
    </html>

Answer 1

Besides the typo you have in the cssText assignment, you are trying to set an invalid css property value 除了cssText分配中存在的错字，您还试图设置无效的css属性值

"url('images/luke.jpg');"

; is not valid as part of the backgroundImage property remove it. 作为backgroundImage属性的一部分无效，请将其删除。 The browser is not assigning the value since it is invalid. 由于无效，浏览器未分配该值。

 (function() { let body = document.body; //Style av kalender for (let i = 0; i < 24; i++) { let nySirkel = document.createElement("div"); nySirkel.style.cssText = "width: 300px; height: 300px; background-image: url('http://lorempixel.com/output/technics-qc-640-480-1.jpg');"; nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;"; nySirkel.style.cssText += "border-radius: 50%; float: left; margin: 5px;"; nySirkel.innerHTML = (i + 1); nySirkel.onclick = openLuke; body.appendChild(nySirkel); } function openLuke() { this.style.backgroundImage = "url('http://lorempixel.com/output/people-qc-640-480-1.jpg')"; } }()); //End function

 <header> <h1>Westerdals julekalender 2017</h1> </header> <!--Meny--> <nav> <ul> <li><a href="julekalender_side1.html">Forsiden</a></li> <li><a href="julekalender_side2.html">Din julekalender</a></li> </ul> </nav> <!--Content from cookie--> <section> <p id="cookie-innhold">Her kommer cookie-innhold</p> </section> <!--Kalenderen--> <div id="kalender-div"> <p id="peker-info"></p> </div> <div id="luke-div"></div>

从JavaScript打印图片

问题描述

1 个解决方案

解决方案1
0 2017-11-23 20:07:24

从JavaScript打印图片

问题描述

1 个解决方案

解决方案1 0 2017-11-23 20:07:24

解决方案1
0 2017-11-23 20:07:24