teramako/highlight_selector.html

## highlight_selector.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight Selector</title>
  <style>
    body > p {
      background-color: #DDD;
      padding: 0.5em;
    }
    .cssSheet {
      background-color: #333;
      font-family: monospace;
      color: white;
      padding: 0.5em;
    }
    .cssSelector {
      color: magenta;
      font-weight: bold;
      cursor: pointer;
    }
    .cssPunctuator {
      color: silver;
    }
    .cssProperty {
      color: lime;
    }
    .cssValue {
      color: yellow;
    }
    .cssIndent {
      margin-left: 1em;
    }
  </style>
</head>
<body>
<h1>Highlight Selector</h1>
<p>テキトウに作った。下のCSSソースのセレクタ部分をクリックしてみよう。対象セレクタがハイライトされるよ。</p>
<script>
(function(){
  var OUTLINE_STYLE       = "2px solid red",
      HIGHLIGHT_INTERVAL  = 200,
      HIGHLIGHT_MAX_TIMES = 10;

  setOutPutSource(document.body);

  function onClick (aEvent) {
    var target = aEvent.target;
    if (target.classList.contains("cssSelector")) {
      aEvent.stopPropagation();
      var elms = document.querySelectorAll(target.textContent);
      for (var i = 0, len = elms.length; i < len; ++i) {
        highlight(elms[i]);
      }
    }
  }
  function highlight (aElement) {
    var currentStyle = aElement.style.outline,
        count = 0;

    var id = window.setInterval(function () {
      aElement.style.outline = (count % 2) ? "" : OUTLINE_STYLE;
      if (count++ > HIGHLIGHT_MAX_TIMES) {
        window.clearInterval(id);
        aElement.style.outline = currentStyle;
      }
    }, HIGHLIGHT_INTERVAL);
  }
  function getStyles (aStyle) {
    var styleText = [];
    for (var i = 0, len = aStyle.length; i < len; ++i) {
      var property = aStyle[i];
      styleText.push(
        '<span class="cssProperty">' + property + '</span>' +
        '<span class="cssPunctuator">:</span>' + ' ' +
        '<span class="cssValue">' + aStyle.getPropertyValue(property) + '</span>' +
        '<span class="cssPunctuator">;</span>'
      );
    }
    return styleText.join("<br/>");
  }
  function setOutPutSource (aParentNode) {
    var root = document.createElement("div");
    root.setAttribute("class", "cssSource");

    var sheets = document.styleSheets;
    for (var i = 0, sheetLength = sheets.length; i < sheetLength; ++i) {
      var sheet = sheets[i],
          rules = sheet.cssRules,
          sheetElm = document.createElement("div");

      root.insertAdjacentHTML("BeforeEnd", "<h2>" + (sheet.href||"Inline") + "</h2>");
      sheetElm.setAttribute("class", "cssSheet");

      for (var j = 0, ruleLength = rules.length; j < ruleLength; ++j) {
        var rule = rules[j],
            div = document.createElement("div");
        div.setAttribute("class", "cssRule");
        div.innerHTML = [
          '<span class="cssSelector">' + rule.selectorText + '</span> <span class="cssPunctuator">{</span>',
          '<div class="cssIndent">' + getStyles(rule.style) + '</div>',
          '<span class="cssPunctuator">}</span>'
        ].join("");
        sheetElm.appendChild(div);
      }
      root.appendChild(sheetElm);
    }
    aParentNode.appendChild(root);

    root.addEventListener("click", onClick ,false);
  }
}());
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Highlight Selector</title>
	<style>
	body > p {
	background-color: #DDD;
	padding: 0.5em;
	}
	.cssSheet {
	background-color: #333;
	font-family: monospace;
	color: white;
	padding: 0.5em;
	}
	.cssSelector {
	color: magenta;
	font-weight: bold;
	cursor: pointer;
	}
	.cssPunctuator {
	color: silver;
	}
	.cssProperty {
	color: lime;
	}
	.cssValue {
	color: yellow;
	}
	.cssIndent {
	margin-left: 1em;
	}
	</style>
	</head>
	<body>
	<h1>Highlight Selector</h1>
	<p>テキトウに作った。下のCSSソースのセレクタ部分をクリックしてみよう。対象セレクタがハイライトされるよ。</p>
	<script>
	(function(){
	var OUTLINE_STYLE = "2px solid red",
	HIGHLIGHT_INTERVAL = 200,
	HIGHLIGHT_MAX_TIMES = 10;

	setOutPutSource(document.body);

	function onClick (aEvent) {
	var target = aEvent.target;
	if (target.classList.contains("cssSelector")) {
	aEvent.stopPropagation();
	var elms = document.querySelectorAll(target.textContent);
	for (var i = 0, len = elms.length; i < len; ++i) {
	highlight(elms[i]);
	}
	}
	}
	function highlight (aElement) {
	var currentStyle = aElement.style.outline,
	count = 0;

	var id = window.setInterval(function () {
	aElement.style.outline = (count % 2) ? "" : OUTLINE_STYLE;
	if (count++ > HIGHLIGHT_MAX_TIMES) {
	window.clearInterval(id);
	aElement.style.outline = currentStyle;
	}
	}, HIGHLIGHT_INTERVAL);
	}
	function getStyles (aStyle) {
	var styleText = [];
	for (var i = 0, len = aStyle.length; i < len; ++i) {
	var property = aStyle[i];
	styleText.push(
	'<span class="cssProperty">' + property + '</span>' +
	'<span class="cssPunctuator">:</span>' + ' ' +
	'<span class="cssValue">' + aStyle.getPropertyValue(property) + '</span>' +
	'<span class="cssPunctuator">;</span>'
	);
	}
	return styleText.join("<br/>");
	}
	function setOutPutSource (aParentNode) {
	var root = document.createElement("div");
	root.setAttribute("class", "cssSource");

	var sheets = document.styleSheets;
	for (var i = 0, sheetLength = sheets.length; i < sheetLength; ++i) {
	var sheet = sheets[i],
	rules = sheet.cssRules,
	sheetElm = document.createElement("div");

	root.insertAdjacentHTML("BeforeEnd", "<h2>" + (sheet.href\|\|"Inline") + "</h2>");
	sheetElm.setAttribute("class", "cssSheet");

	for (var j = 0, ruleLength = rules.length; j < ruleLength; ++j) {
	var rule = rules[j],
	div = document.createElement("div");
	div.setAttribute("class", "cssRule");
	div.innerHTML = [
	'<span class="cssSelector">' + rule.selectorText + '</span> <span class="cssPunctuator">{</span>',
	'<div class="cssIndent">' + getStyles(rule.style) + '</div>',
	'<span class="cssPunctuator">}</span>'
	].join("");
	sheetElm.appendChild(div);
	}
	root.appendChild(sheetElm);
	}
	aParentNode.appendChild(root);

	root.addEventListener("click", onClick ,false);
	}
	}());
	</script>
	</body>
	</html>