Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
显示页面的盒结构
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

This comment has been minimized.

Copy link

commented May 21, 2013

@wintercn 开个页面,输入网址,咔嚓一下把布局显示出来

@switer

This comment has been minimized.

Copy link

commented May 21, 2013

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

@tinyhill

This comment has been minimized.

Copy link

commented May 23, 2013

华丽啊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.