Nếu img dưới đây là hiệnJavascript: nhận được <img> src và đặt làm biến?
<img id="youtubeimg" src="http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg"/>
và kịch bản là
<script>
var youtubeimgsrc = "something here"
document.write(''+youtubeimgsrc+'')
</script>
và kết quả nên http://i1.ytimg.com/vi/VK4ah66jBvE/0.jpg
gì tôi có thể làm để có được các nguồn hình ảnh và thiết lập như là một biến .
Chừng nào kịch bản là sau các img, sau đó:
var youtubeimgsrc = document.getElementById("youtubeimg").src;
Xem getElementById trong đặc tả DOM.
Nếu tập lệnh là trướcimg, thì dĩ nhiên img chưa tồn tại và điều đó không hoạt động. Đây là một trong những lý do tại sao nhiều người khuyên bạn nên đặt kịch bản ở phần cuối của phần tử body.
Side lưu ý: Nó không quan trọng trong trường hợp của bạn bởi vì bạn đã sử dụng một URL tuyệt đối, nhưng nếu bạn sử dụng một tương URL trong các thuộc tính, như thế này:
<img id="foo" src="/images/example.png">
... thuộc tính được phản ánh src sẽ là được giải quyết URL — có nghĩa là URL tuyệt đối chuyển thành. Vì vậy, nếu đó là trên trang http://www.example.com, document.getElementById("foo").src sẽ cung cấp cho bạn "http://www.example.com/images/example.png".
Nếu bạn muốn nội dung của thuộc tính srclà, mà không được giải quyết, bạn sẽ sử dụng getAttribute thay thế: document.getElementById("foo").getAttribute("src"). Điều đó sẽ cung cấp cho bạn "/images/example.png" với ví dụ của tôi ở trên.
Nếu bạn có URL tuyệt đối, giống như URL trong câu hỏi của bạn, điều đó không quan trọng.
thankyou hoạt động rực rỡ –
Làm thế nào về vấn đề này ví dụ:
var youtubeimgsrc = document.getElementById("youtubeimg").getAttribute('src');
Không cần' getAttribute', 'src' là [thuộc tính được phản ánh] (http://www.w3.org /TR/DOM-Level-2-HTML/html.html#ID-97320704) được tài liệu hóa theo chuẩn và được hỗ trợ bởi mọi trình duyệt kể từ giữa thập niên 90 (er, không theo thứ tự ;-)). –
@ T.J. Crowder chính xác, đây chỉ là thay thế nếu anh ta muốn thêm tài sản tùy chỉnh, ông có thể sử dụng này. Tôi vẫn chọn câu trả lời của bạn nếu tôi là anh ấy. – ant
@ T.J.Crowder: '.src' và' .getAttribute ('src') 'trả về các kết quả khác nhau. Tùy chọn đầu tiên sẽ giải quyết ** URL ** trong khi tùy chọn thứ hai sẽ trả về tham số ** src **. Vì vậy đây là câu trả lời đúng cho câu hỏi. – Daew
trong tình huống này, bạn sẽ lấy các phần tử bằng id của nó sử dụng getElementById và sau đó chỉ cần sử dụng .src
var youtubeimgsrc = document.getElementById("youtubeimg").src;
var youtubeimgsrc = document.getElementById('youtubeimg').src;
document.write(youtubeimgsrc);
Dưới đây là một fiddle cho bạn http://jsfiddle.net/cruxst/dvrEN/
Nếu bạn không có một id trên hình ảnh nhưng có một div cha mẹ này cũng là một kỹ thuật bạn có thể sử dụng.
<div id="myDiv"><img src="http://www.example.com/image.png"></div>
var myVar = document.querySelectorAll('#myDiv img')[0].src
Sử dụng JQuery, thật dễ dàng.
Bao gồm thư viện JQuery vào tập tin html của bạn vào đầu như vậy:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
(Hãy chắc chắn rằng thẻ script này đi trước khi thẻ script khác của bạn trong file html của bạn)
Target id của bạn trong tệp JavaScript của bạn như vậy:
<script>
var youtubeimcsrc = $('#youtubeimg').attr('src');
//your var will be the src string that you're looking for
</script>
ok, và thậm chí điều này cũng dễ dàng .. 'document.getElementById (" youtubeimg "). Src'? .. hoặc có thể là nếu bạn chỉ định nghĩa hàm của riêng bạn 'hàm a (elem) {return document.getElementById (elem); } 'Bây giờ điều này là dễ nhất' var youtubeimgsrc = a ('youtubeimg'). Src' –
Câu hỏi JavaScript và không phải là câu trả lời bằng jQuery? Cách kỳ lạ! 'var youtubeimgsrc = $ ('youtubeimg'). attr ('src'); ' – Keyslinger