亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用javascript將圖像src更改為本地圖像?

使用javascript將圖像src更改為本地圖像?

郎朗坤 2023-09-14 18:10:50
第一次在這里接觸 javascript,所以請耐心等待。我的文件結構如下所示:我想使用 js 更改 HTML 中的圖像。這是相關的 HTML 代碼:    <!DOCTYPE html><html>    <head>        <title>Assignment 3A</title>        <meta charset="UTF-8">        <link rel="stylesheet" type="text/css" href="style/assignment_3.css">        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>        <script src="data/data.js"></script>        <script src="script/htmlMaker.js"></script>        <script src="script/assignment_3.js"></script>        <script id="news-detail-template" type="text/html">                    <img class='news_photo' src='{{photo}}' >        <div class='news_heading'>{{heading}}</div>        <div class='date'>{{Date}}</div>        <div class='news_detail'>{{details}}</div>                  </script>          <script id="news-item-template" type="text/html">        <div news_id='{{id}}' class='news_item' > {{heading}} </div>         <img class='news_img' src='data/NBA.jpg'>        </script>             </head>    <body>        <div class="newsDiv">            <div class="left">Latest</div>            <div id="news" class="marquee"></div>            <img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">        </div>        <div id="detail" class="detail">        </div>    </body></html>然后是tasking_3.js中對應的js代碼:function toggle(image) {    if (image.src != "data/pause.png")    {        image.src='data/pause.png';    }    else if (image.src == "data/pause.png")    {        image.src='data/play.png';    }}顯然,這里出了問題,因為瀏覽器似乎根本無法識別我的圖像路徑。我該如何正確地做到這一點?
查看完整描述

3 回答

?
夢里花落0921

TA貢獻1772條經驗 獲得超6個贊

當您使用 時image.src,它會返回圖像的完整路徑。在這種if情況下,您只檢查圖像的相對路徑。要檢查圖像的相對路徑,可以使用image.getAttribute('src').


function toggle(image) {

  if (image.getAttribute('src') == "data/pause.png") {

    image.setAttribute('src', 'data/play.png');

  } else {

    image.setAttribute('src', 'data/pause.png');

  }

}

<body>

  <div class="newsDiv">

    <div class="left">Latest</div>

    <div id="news" class="marquee"></div>

    <img id="toggle" class="right" src="data/pause.png" onclick="toggle(this)">

  </div>

  <div id="detail" class="detail">


  </div>

</body>


查看完整回答
反對 回復 2023-09-14
?
慕碼人2483693

TA貢獻1860條經驗 獲得超9個贊

您需要使用該getAttribute函數來檢查相等性。您可以使用常規賦值運算符設置圖像源,但不能用于==檢查相等性。



查看完整回答
反對 回復 2023-09-14
  • 3 回答
  • 0 關注
  • 211 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號