代替テキストが指定されていないimg要素をハイライトする

  • /*
     * @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 })
    })()
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2022/08/24 11:25:11 - 2022-08-24
  2. 2022/08/24 10:32:58 - 2022-08-24
  3. 2022/08/24 10:32:32 - 2022-08-24