こんにちは。
以下のスクリプトは、場所プラグインでツールチップを永続的に表示し、タイプ（イベント、会場など）に応じて並べ替えるために色を付けます。凡例とフィルターを検討中です。
状況は、それが機能するのですが、ページをリロードした後だけで、URLからページにアクセスしたときは機能しません。
両方のケースでコンソールにエラーの違いはなく、関数に遅延を追加しても何も変わりません。
テーマ編集メニューからヘッダーにJavaScriptを追加した際に、このような経験をした方で解決策を見つけた方はいらっしゃいますか？
以下は結果の画像です。
ここでのエラーはコードの有無にかかわらず表示されるため、コードとは関係ありません。
<script>
document.addEventListener('DOMContentLoaded', function() {
// Apply CSS to change the alt text style
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
/* Ensure alt text is bold, underlined, and has conditional color */
.leaflet-marker-pane img[alt] {
font-weight: bold !important; /* Make text bold */
text-decoration: underline !important; /* Underline the text */
white-space: nowrap; /* Prevent the text from wrapping to a new line */
}
`;
document.head.appendChild(style);
// Give the page a moment to load and the images to be rendered
setTimeout(function() {
var images = document.querySelectorAll('.leaflet-marker-pane img');
images.forEach(function(img) {
var title = img.getAttribute('title');
if (title) {
title = title.length > 10 ? title.substring(0, 10) + '..' : title;
img.setAttribute('alt', title);
img.setAttribute('title', title);
if (title.includes('/')) {
img.style.color = 'white';
} else {
img.style.color = 'black';
}
}
img.setAttribute('src', '');
});
}, 1000); // Delay execution by 1 second (1000 ms)
});
</script>