Javascript : obține src și setat ca variabilă? (Programare, Javascript, Imagine, Src)

Yusaf Khaliq a intrebat.

Dacă img-ul de mai jos este prezent

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

și scriptul este

<script>
var youtubeimgsrc = "something here"

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

și rezultatul ar trebui să fie http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg

ce pot face pentru a obține sursa imaginii și setați ca o variabilă.

Comentarii

  • O întrebare JavaScript și nu un răspuns folosind jQuery? Ce ciudat! var youtubeimgsrc = $('youtubeimg').attr('src'); –  > Por Keyslinger.
6 răspunsuri
T.J. Crowder

Atâta timp cât scenariul este după img, atunci:

var youtubeimgsrc = document.getElementById("youtubeimg").src;

Vezi getElementById în specificația DOM.

În cazul în care scriptul este înainte de img, atunci, bineînțeles că img nu există încă, iar acest lucru nu funcționează. Acesta este unul dintre motivele pentru care mulți oameni recomandă să se pună scripturile la sfârșitul fișierului body element.


Notă laterală: Nu contează în cazul dvs. pentru că ați folosit un URL absolut, dar dacă ați folosit un URL relativ URL relativ în atribut, cum ar fi acesta:

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

src reflectată va fi proprietatea rezolvată URL – și anume, URL-ul absolut în care se transformă. Deci, dacă aceasta ar fi fost pe pagină http://www.example.com, document.getElementById("foo").src v-ar oferi "http://www.example.com/images/example.png".

Dacă ați vrea ca src conținutul atributului așa cum este, fără a fi rezolvat, ați folosi getAttribute în locul lui: document.getElementById("foo").getAttribute("src"). Astfel, veți obține "/images/example.png" cu exemplul meu de mai sus.

Dacă aveți o adresă URL absolută, ca cea din întrebarea dumneavoastră, nu contează.

ant

Ce zici de acest exemplu :

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

Comentarii

  • Nu este nevoie de getAttribute, src este un proprietate reflectată documentată de standard și susținută de fiecare browser încă de la mijlocul anilor ’90 (er, nu în această ordine 😉 ). –  > Por T.J. Crowder.
  • @T.J. Crowder corect, aceasta a fost doar o alternativă, dacă ar fi dorit să adauge o proprietate personalizată, ar fi putut folosi acest lucru. Totuși, aș alege răspunsul tău dacă aș fi în locul lui. –  > Por ant.
  • @T.J.Crowder: .src și .getAttribute('src') returnează rezultate diferite. Prima opțiune va rezolva URL în timp ce a doua opțiune va returna src așa cum este. Prin urmare, acesta este răspunsul corect la întrebare. –  > Por Daew.
  • @Daew: Într-adevăr, acestea oferă valori de returnare diferite dacă URL-ul din atribut este relativ, da. URL-ul din atributul src din întrebare este absolut, însă. –  > Por T.J. Crowder.
  • @T.J.Crowder: Sunt de acord și, în majoritatea cazurilor de utilizare, nu contează cu adevărat care dintre ele se folosește. Am vrut doar să subliniez faptul că, din moment ce acestea returnează rezultate diferite, această metodă este, de asemenea, relevantă și nu doar un alias. Vă mulțumim pentru actualizarea răspunsului =) –  > Por Daew.
ak85

Dacă nu aveți un id pe imagine, dar aveți un div părinte, aceasta este, de asemenea, o tehnică pe care o puteți folosi.

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

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

Joseph Marikle

în această situație, ați lua elementul după id-ul său folosind getElementById și apoi folosiți doar .src

var youtubeimgsrc = document.getElementById("youtubeimg").src;

Andrew Kolesnikov
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);

Iată un exercițiu pentru dvs. http://jsfiddle.net/cruxst/dvrEN/

Travis Smith

Folosiți JQuery, este ușor.

Includeți biblioteca JQuery în fișierul dvs. html în head ca atare:

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

(Asigurați-vă că această etichetă de script se află înaintea celorlalte etichete de script din fișierul html)

Țintește-ți id-ul în fișierul tău JavaScript astfel:

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

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

</script>

Comentarii

  • ok, și chiar și acest lucru este ușor… document.getElementById("youtubeimg").src? … sau poate dacă vă definiți propria funcție function a(elem){ return document.getElementById(elem); } Acum, acest lucru este cel mai simplu var youtubeimgsrc = a('youtubeimg').src –  > Por Ramesh Pareek.