web-dev-qa-db-ja.com

JavaScriptはjQueryなしでimg src属性を変更します

JavaScriptでsrcのHTMLImageElement属性を変更するにはどうすればよいですか？

logo.attr('src','img/rm2.png')をVanilla JavaScriptに変換するための支援が必要です。

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.attr('src','img/rm2.png');
    }
};
javascriptimagesrc
12
technopeasant

あなたは純粋なjavascriptを使いたいという意味ですか？

これはそれを行うはずです：

var logo = document.getElementById('rm');
logo.src = "img/rm2.png";

したがって、関数は次のようになります。

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
      var logo = document.getElementById('rm');
      logo.src = "img/rm2.png";
    }
};

注： element.setAttribute を使用することもできます。しかし、詳細についてはこの投稿を参照してください：
JavaScriptでsetAttribute vs .attribute =を使用する場合？

23
gideon

これを試してください...うまくいくことを願っています

window.onresize = window.onload = function () {
    if (window.innerWidth > 1536) {
        var logo = document.getElementById('rm');
        logo.setAttribute('src','img/rm2.png');
    }
};
1
Tejasva Dhyani

logo.src = "img/rm2.png"。

0
dbrin
var logo = document.getElementById('rm');
logo.setAttribute('src', 'img/rm2.png');
0
Aaron

プログラムの別の場所でこれを実行したいというので、次のような関数を作成します。

function ChangeImage(image_id,path)
{
  document.images[image_id].src = path
}
0
Nobita

したがって、サイズが変更されているかどうかを確認したい場合は、次のコードを確認してください。

window.onresize = window.onload = function () {
    if (window.innerWidth < 768) {

      var logo = document.getElementById('changeLeft');
      logo.src = "MobileImage.png";

    }else{

 var logo = document.getElementById('changeLeft');
      logo.src = "DesktopImage.png";

    }
};

ブレークポイントを決定するためにwindow.innerWidthを調整します。お役に立てば幸いです。

0
Sabba Keynejad