是否无法在标题属性中使用 HTML 实体?

发布于 2024-11-05 03:45:29 字数 2897 浏览 4 评论 0原文

上面的屏幕截图来自 Firefox。光标悬停在图像左侧的黄点上。它是一个 元素(实际上它是一个图像以及包含单个圆形 元素的图像映射,但我认为这种区别并不重要)已在 JavaScript 中创建并设计样式,包括应用标题属性(通过剪切和粘合字符串构造)。我怎样才能让它表现出来并显示预期的字符,一个破折号,而不是 –?它适用于innerHTML(顶部中左的文本“Barrow-In-Furness”是一个div,也是使用JavaScript及其innerHTML集创建的。)

编辑:回应Domenic的问题:这是JavaScript函数构建并应用标题属性(除了执行其他作业):

var StyleLinkMarker = function (LinkNumber, EltA, EltI) {
    var AltText = LocationName[LinkStart[LinkNumber]] +
                  " to " +
                  LocationName[LinkEnd[LinkNumber]];
    if (!EltA) {
        EltA = document.getElementById("link_marker_area" + LinkNumber);
        EltI = document.getElementById("link_marker_img" + LinkNumber);
    }
    if (LinkStatus[LinkNumber] === 9) {
        var CanBuyLinkCode = BoardPreviewMode ? 0 : CanBuyLink(LinkNumber);
        if (CanBuyLinkCode === 0) {
            EltI.src = ImagePath + "icon-buylink-yes.png";
            AltText += " (you can buy this " + LinkAltTextDescription + ")";
        } else {
            EltI.src = ImagePath + "icon-buylink-no.png";
            AltText += " (you cannot buy this " + LinkAltTextDescription;
            AltText += CanBuyLinkCode === 1 ?
                       ", because you aren't connected to it)" :
                       ", because you would have to buy coal from the Demand Track, and you can't afford to do that)";
        }
    } else if ( LinkStatus[LinkNumber] === 8 ||
                (LinkStatus[LinkNumber] >= 0 && LinkStatus[LinkNumber] <= 4)
                ) {
        EltI.src = ImagePath + "i" + LinkStatus[LinkNumber] + ".png";
        if (LinkStatus[LinkNumber] === 8) {
            AltText += " (orphan " + LinkAltTextDescription + ")";
        } else {
            AltText += " (" +
                       LinkAltTextDescription +
                       " owned by " +
                       PersonReference(LinkStatus[LinkNumber]) +
                       ")";
        }
    } else {
        throw "Unexpected Link Status";
    }
    EltA.alt = AltText;
    EltA.title = AltText;
};

LocationName 如下:

var LocationName = [
    "Barrow&ndash;In&ndash;Furness", "Birkenhead",                "Blackburn", "Blackpool",
                           "Bolton",    "Burnley",                     "Bury",     "Colne",
                   "Ellesmere Port",  "Fleetwood",                "Lancaster", "Liverpool",
                     "Macclesfield", "Manchester",             "The Midlands", "Northwich",
                           "Oldham",    "Preston",                 "Rochdale",  "Scotland",
                        "Southport",  "Stockport", "Warrington &amp; Runcorn",     "Wigan",
                        "Yorkshire"
];

The above screengrab is from Firefox. The cursor is hovering over the yellow spot at the left hand side of the image. It is an <img> element (well actually it's an image together with an image map containing a single circular <area> element, but I assume this distinction is unimportant) that has been created and styled in JavaScript, including the application of a title attribute (constructed by cutting and gluing strings). How can I get this to behave and show the intended character, an en dash, instead of ? It works for innerHTML (the text "Barrow-In-Furness" in the top middle-left is a div that was also created using JavaScript, and its innerHTML set.)

Edit: In response to question of Domenic: Here is the JavaScript function that builds and applies the title attribute (in addition to performing other jobs):

var StyleLinkMarker = function (LinkNumber, EltA, EltI) {
    var AltText = LocationName[LinkStart[LinkNumber]] +
                  " to " +
                  LocationName[LinkEnd[LinkNumber]];
    if (!EltA) {
        EltA = document.getElementById("link_marker_area" + LinkNumber);
        EltI = document.getElementById("link_marker_img" + LinkNumber);
    }
    if (LinkStatus[LinkNumber] === 9) {
        var CanBuyLinkCode = BoardPreviewMode ? 0 : CanBuyLink(LinkNumber);
        if (CanBuyLinkCode === 0) {
            EltI.src = ImagePath + "icon-buylink-yes.png";
            AltText += " (you can buy this " + LinkAltTextDescription + ")";
        } else {
            EltI.src = ImagePath + "icon-buylink-no.png";
            AltText += " (you cannot buy this " + LinkAltTextDescription;
            AltText += CanBuyLinkCode === 1 ?
                       ", because you aren't connected to it)" :
                       ", because you would have to buy coal from the Demand Track, and you can't afford to do that)";
        }
    } else if ( LinkStatus[LinkNumber] === 8 ||
                (LinkStatus[LinkNumber] >= 0 && LinkStatus[LinkNumber] <= 4)
                ) {
        EltI.src = ImagePath + "i" + LinkStatus[LinkNumber] + ".png";
        if (LinkStatus[LinkNumber] === 8) {
            AltText += " (orphan " + LinkAltTextDescription + ")";
        } else {
            AltText += " (" +
                       LinkAltTextDescription +
                       " owned by " +
                       PersonReference(LinkStatus[LinkNumber]) +
                       ")";
        }
    } else {
        throw "Unexpected Link Status";
    }
    EltA.alt = AltText;
    EltA.title = AltText;
};

LocationName is as follows:

var LocationName = [
    "Barrow–In–Furness", "Birkenhead",                "Blackburn", "Blackpool",
                           "Bolton",    "Burnley",                     "Bury",     "Colne",
                   "Ellesmere Port",  "Fleetwood",                "Lancaster", "Liverpool",
                     "Macclesfield", "Manchester",             "The Midlands", "Northwich",
                           "Oldham",    "Preston",                 "Rochdale",  "Scotland",
                        "Southport",  "Stockport", "Warrington & Runcorn",     "Wigan",
                        "Yorkshire"
];

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

鼻尖触碰 2024-11-12 03:45:29

您没有设置标题属性,而是设置标题属性,它需要文本而不是HTML(尽管setAttribute方法也需要文本字符串)。

一般来说,在处理 DOM 操作时,您提供文本而不是 HTML。 .innerHTML 是此规则的一个值得注意的例外。

You aren't setting the title attribute, you are setting the title property, which expects text and not HTML (although the setAttribute method also expects a text string).

Generally speaking, when dealing with DOM manipulation, you provide text and not HTML. .innerHTML is the notable exception to this rule.

撩人痒 2024-11-12 03:45:29

下面是从 HTML 转换为文本的简单方法:

function convertHtmlToText(value) {
    var d = document.createElement('div');
    d.innerHTML = value;
    return d.innerText;
}

然后您的代码可以更新为:

EltA.title = convertHtmlToText(AltText);

Here's an easy way to convert from HTML to text:

function convertHtmlToText(value) {
    var d = document.createElement('div');
    d.innerHTML = value;
    return d.innerText;
}

Your code could then be updated to this:

EltA.title = convertHtmlToText(AltText);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文