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

by utgwkk 2022-08-24 [2022/08/24 11:25:11]

imgタグのalt属性が未指定の要素を赤くハイライトします。指定されていたら緑色でハイライトします。一度実行したら要素が動的に変わってもハイライトされます

@@ -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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。