HTMLの構造を明示するJavaScript
これを埋めればHTMLの各要素に色分けされたボーダーが付くという。
最後の方にランダム(?)でborderの色を振るコードが入っているけれど、極めてテキトウ。
16進数ですらないっていう…。
はい、そこ!clazzのあたりの変数の命名に突っ込まない!!
ボーダーが見えさえすれば何でもいいので、雑でもOKということで。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function() { var colorIndex = 0; $('html *').each(function() { var this_ = $(this); var id = this_.attr('id'); var clazz = this_.attr('class'); var name = []; name.push('<span>'); name.push(this.tagName.toLowerCase()); var hasId = false; if (id && id !== '') { name.push('#'); name.push(id); hasId = true; } if (clazz && clazz !== '') { if (hasId) name.push(' '); var classes = clazz.split(' '); for (var i = 0; i < classes.length; i++) { name.push('.'); name.push(classes[i]); name.push(' '); } } name.push('</span>'); this_.prepend(name.join('')).css({ border: 'solid 2px #' + ((colorIndex++ * 517) % 1000), margin: '15px', padding: '5px' }); if (this_.is('ul')) this_.css('list-style', 'none'); }); }); </script>