使用javascript設置HTML img標題屬性

更新：獲得標題以正確拖動但在Internet Explorer中圖像的標題未顯示。適用於Firefox和Chrome。我不能讓我的頭周圍，我說的是這樣的：使用javascript設置HTML img標題屬性

<script type="text/javascript" src="//www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<html> 
    <i><strong><a href="__URL__" target="_blank">PDW Status: </a></strong></i> 
    <a href="__URL__" target="_blank"></a> 
    <a href="__URL__" target="_blank"><br/></a> 

    <a href="__URL__" target="_blank">Green</a>&#160;- 
    <img id="Green" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="lightgreen1.jpg" 
    src="__URL__" style="margin: 5px;"/></em>&#160;&#160;&#160;&#160;&#160; 

    <a href="__URL__" target="_blank">Red</a>&#160;- 
    <img id="Red" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="red1.jpg" 
    src="__URL__" style="margin: 5px;"/></em>&#160;&#160;&#160;&#160;&#160; 

    <a href="__URL__" target="_blank">Yellow</a>&#160;- 
    <img id="Yellow" class="ms-rtePosition-4 ms-rteImage-2 ms-rteStyle-Emphasis" alt="yellow1.jpg" 
    src="__URL__" style="margin: 5px;"/>&#160;&#160;&#160;&#160;&#160; 

    <a href="__URL__" target="_blank">White</a> &#160;- 
    <img id="White" class="ms-rteImage-2 ms-rtePosition-4" alt="white.jpg" 
    src="__URL__" style="margin: 5px;"/>&#160; 

</html> 


<style> 
    a:link { text-decoration: none; 
    color: #0072c6 } a:visited { text-decoration: none; color: #0072c6 } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } 
</style> 

<script type="text/javascript"> 
//Grab data from list and post into HTML Fields 
$(function() { 
    green = ""; 
    yellow = ""; 
    red = ""; 
    white = ""; 

    $.ajax({ 
      url: "__URL__", 
      headers: {"Accept": "application/json;odata=verbose"}, 
      type: "GET", 
      cache: false, 
      async: false,  

     }).success(function (data) { 
      $.each(data.d.results, function(key, value) { 
       console.log(value.Title); 
       switch (value.Title) { 
        case "GREEN": 
         green += value.Description; 
         console.log("GREEN TEST" + green); 
         var gDescription = document.querySelector('#Green'); 
         gDescription.title = "" + green;  
         break; 
        case "YELLOW": 
         yellow += value.Description; 
         console.log("YELLOW TEST" + yellow); 
         var yDescription = document.querySelector('#Yellow'); 
         yDescription.title = "" + yellow; 
         break; 
        case "RED": 
         red += value.Description; 
         console.log("RED TEST" + red); 
         var rDescription = document.querySelector('#Red'); 
         rDescription.title = "" + red; 
         break; 
        default: 
         white += value.Description; 
         console.log("WHITE TEST" + white); 
         var wDescription = document.querySelector('#White'); 
         wDescription.title = "" + white; 
       } 
     }); 
    }); 
}); 

</script>

這是一個相關的問題，但似乎並沒有解決這個問題之一：why can't I set an ascii reference in an img title attribute using js?

來源

2016-06-30 JWill23

你通過每個項目的循環設置一個HTML圖像title屬性。你在控制檯上遇到錯誤嗎？在哪個項目不能附加到綠色變量？我會把綠色的變量放在你的控制檯日誌中，在value.Title和value.Description之後。查看正在設置的內容。沒有看到導致問題的數據，很難提出解決方案。 – ManoDestra

另外，請記住每個瀏覽器都會以不同的方式處理title屬性。你需要檢查你的AJAX調用返回的數據。並輸出每個循環中設置的變量。使用你的console.log語句，你會發現錯誤。代碼本身沒有任何重大問題，除了沒有設置黃色，紅色或白色的任何東西。這些變量將繼續附加到每個AJAX調用中，它們不會重置爲「」。這可能是正確的，但值得注意。 – ManoDestra

你試過：

var image = document.querySelector('img'); 
image.title = 'Your title'; // Assigning directly to attribute. 
image.setAttribute('title', 'Your other title'); // Assigning by method.

這是怎麼了，你可以使用JavaScript

來源

2016-06-30 16:28:26

這沒有奏效。我做了var wDescription = document.querySelector（'＃Green'）; gDescription.title =綠色;但所有我改變是我抓住它的ID – JWill23

@ JWill23'wDescription！== gDescription' – Teemu

對不起，我必須複製它之前，我做了所有的更改，但我的意思是把gDescription，它似乎現在正在工作，但這是標題顯示爲「

Project has no schedule or budget impacting issues.

」 – JWill23

使用javascript設置HTML img標題屬性

回答

相關問題