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

    @@ -6,19 +6,22 @@ * @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 } - node.querySelectorAll("img").forEach((img) => { - // alt属性が指定されていたら緑の線、指定されていないなら赤線で囲まれる - img.style.outline = img.getAttribute('alt') !== null ? "1px solid green" : "2px solid red" - }) + highlight(node) }) }) }) observer.observe(document.body, { childList: true, subtree: true }) -})() - +})()
  • /*
     * @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 です。