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

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

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

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

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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