by utgwkk
2022-08-24 [2022/08/24 11:25:11]
imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします。一度実行したら要素が動的に変わってもハイライトされます
/*
* @title 代替テキストが指定されていないimg要素をハイライトする
* @description imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします。一度実行したら要素が動的に変わってもハイライトされます
* @include https://*
* @license MIT License
* @require
*/
(() => {
const highlight = (element) => {
element.querySelectorAll("img").forEach((img) => {
// alt属性が指定されていたら緑の線、指定されていないなら赤線で囲まれる
img.style.outline = img.getAttribute('alt') !== null ? "1px solid green" : "2px solid red"
})
}
highlight(document.body)
const observer = new MutationObserver((ms) => {
ms.forEach((m) => {
m.addedNodes.forEach((node) => {
if (!(node instanceof HTMLElement)) {
return
}
highlight(node)
})
})
})
observer.observe(document.body, { childList: true, subtree: true })
})()