web-dev-qa-db-ja.com

Javascript：<img> srcを取得して変数として設定しますか？

以下の画像が存在する場合

<img id="youtubeimg" src="http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg"/>

そして、スクリプトは

<script>
var youtubeimgsrc = "something here"

document.write(''+youtubeimgsrc+'')
</script>

結果はhttp://i1.ytimg.com/vi/VK4ah66jBvE/0.jpgになります

画像ソースを取得して変数として設定するにはどうすればよいですか。

javascriptimagesrc
25
Yusaf Khaliq

スクリプトがafterimgである限り：

_var youtubeimgsrc = document.getElementById("youtubeimg").src;
_

DOM仕様の getElementById を参照してください。

スクリプトがbeforeimgである場合、もちろんimgはまだ存在していません。動作しません。これが、多くの人がbody要素の最後にスクリプトを置くことを推奨する理由の1つです。

サイドノート：絶対URLを使用したので、あなたの場合は関係ありませんが、属性でrelativeURLを使用した場合、この：

_<img id="foo" src="/images/example.png">
_

... src反映されたプロパティは、resolvedURL —つまり、変換される絶対URLです。したがって、それがページ_http://www.example.com_にある場合、document.getElementById("foo").srcは_"http://www.example.com/images/example.png"_を提供します。

src属性のコンテンツをそのままにしたい場合、解決せずに、代わりにgetAttributeを使用します：document.getElementById("foo").getAttribute("src")。上記の例で_"/images/example.png"_が得られます。

質問のような絶対URLがあれば、それは問題ではありません。

57
T.J. Crowder

たとえば、これについてはどうですか：

var youtubeimgsrc = document.getElementById("youtubeimg").getAttribute('src');
6
ant

画像にidがなく、親divがある場合、これも使用できるテクニックです。

<div id="myDiv"><img src="http://www.example.com/image.png"></div>

var myVar = document.querySelectorAll('#myDiv img')[0].src
3
ak85

この状況では、getElementByIdを使用してidで要素を取得し、.src

var youtubeimgsrc = document.getElementById("youtubeimg").src;
0
Joseph Marikle
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);

ここにあなたのためのフィドルがあります http://jsfiddle.net/cruxst/dvrEN/

0
Andrew Kolesnikov

簡単なJQueryを使用します。

次のように、JQueryライブラリをheadのhtmlファイルに含めます。

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

（このスクリプトタグがHTMLファイル内の他のスクリプトタグの前にあることを確認してください）

JavaScriptファイルのIDを次のようにターゲットにします。

<script>
var youtubeimcsrc = $('#youtubeimg').attr('src');

//your var will be the src string that you're looking for

</script>
0
Travis Smith