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

    @@ -1,6 +1,6 @@ /* * @title 代替テキストが指定されていないimg要素をハイライトする - * @description imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします + * @description imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします。一度実行したら要素が動的に変わってもハイライトされます * @include https://* * @license MIT License * @require
  • /*
     * @title 代替テキストが指定されていないimg要素をハイライトする
     * @description imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします。一度実行したら要素が動的に変わってもハイライトされます
     * @include https://*
     * @license MIT License
     * @require 
     */
    (() => {
      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"
            })
          })
        })
      })
      observer.observe(document.body, { childList: true, subtree: true })
    })()
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。