Question

更新：获得正确的标题，但在Internet Explorer中，图像标题未显示。适用于Firefox和Chrome。我无法理解它，我正在谈论这个：

<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?

Answer 1

你试过了吗？

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

您可以使用javascript

设置HTML图片标题属性

使用javascript设置HTML img title属性

1 个答案: