Show IDs in the page

by wakabatan 2013-11-20 [2013/11/20 18:39:41]

Show IDs of the elements in the current page.

• /*
   * @title Show IDs in the page
   * @description Show IDs of the elements in the current page.
   * @license CC0
   */
  
  
  var els = document.querySelectorAll ('[id], a[name]');
  for (var i = 0; i < els.length; i++) {
    var el = els[i];
    var id = el.id || el.name;
    var anchor = document.createElement ('a');
    anchor.href = '#' + encodeURIComponent (id);
    anchor.className = '___id_anchor';
    anchor.textContent = '#' + id;
    if (el.namespaceURI == "http://www.w3.org/1999/xhtml") {
      anchor.title = el.localName;
      if (el.localName.match (/^(?:h[1-6]|td|th|li|dt|dd|html)$/)) {
        el.insertBefore (anchor, el.firstChild);
        continue;
      }
    } else {
      anchor.title = '{' + el.namespaceURI + '}' + el.localName;
    }
    el.parentNode.insertBefore (anchor, el);
  }
  
  var style = document.createElement ('style');
  style.textContent = '.___id_anchor { display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; border: none !important; padding: 0 !important; background-color: #ffa !important; color: black !important; font-size: 16px !important; font-weight: normal !important; font-family: monospace !important; line-height: 1.0 !important; text-decoration: underline !important }';
  document.head.appendChild (style);
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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