Skip to content

Instantly share code, notes, and snippets.

@wintercn
Created May 21, 2013 06:34
Show Gist options
  • Save wintercn/5617888 to your computer and use it in GitHub Desktop.
Save wintercn/5617888 to your computer and use it in GitHub Desktop.
显示页面的盒结构
function randomColor(){
return "rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
}
function showBoxes(window) {
var rects = [];
function getRects(node){
var range = window.document.createRange();
range.setStartBefore(node);
range.setEndAfter(node);
rects.push.apply(rects,range.getClientRects());
for(var i = 0; i < node.children.length; i++ )
getRects(node.children[i]);
}
getRects(window.document.documentElement);
window.open( "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\">"+rects.map(function(rect){
return "<rect x=\""+rect.left+"\" y=\""+rect.top+"\" width=\""+rect.width+"\" height=\""+rect.height+"\" style=\"fill:"+randomColor()+";fill-opacity:0.1;stroke:black;stroke-width:1;\"/>";
}).join("")+"</svg>");
}
showBoxes(window);
@switer
Copy link

switer commented May 21, 2013

svg的位置偏上了,被挡住了一部分

@tinyhill
Copy link

华丽啊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment