精确测量
显示元素的精确像素尺寸和位置信息
可视化标线
点击元素显示红色边框线，直观显示元素边界
即时响应
鼠标悬停即时显示元素信息，无需额外操作
通用兼容
适用于任何网页，无需安装插件或扩展
使用步骤
- 将上方的"📏 元素标尺"链接拖拽到浏览器书签栏
- 打开任意需要测量的网页
- 点击书签栏中的"元素标尺"书签
- 鼠标悬停在元素上查看尺寸信息
- 点击元素显示测量标线
- 再次点击书签退出测量模式
演示区域
点击我测量
悬停查看信息
测试元素
在实际网页中使用书签工具可以测量任意元素的尺寸
书签代码（已压缩）：
javascript:(function(){if(window.elementRuler){window.elementRuler.destroy();return;}var s=document.createElement('style');s.innerHTML='.ruler-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.1);z-index:999999;cursor:crosshair;}.ruler-info{position:fixed;background:#333;color:white;padding:8px 12px;border-radius:4px;font-size:12px;font-family:monospace;z-index:1000000;pointer-events:none;}.ruler-line{position:absolute;background:#ff0000;z-index:1000000;pointer-events:none;}.ruler-line.horizontal{height:1px;}.ruler-line.vertical{width:1px;}';document.head.appendChild(s);var overlay=document.createElement('div');overlay.className='ruler-overlay';document.body.appendChild(overlay);var info=document.createElement('div');info.className='ruler-info';document.body.appendChild(info);var lines=[];function createLine(x1,y1,x2,y2,type){var line=document.createElement('div');line.className='ruler-line '+type;if(type==='horizontal'){line.style.left=Math.min(x1,x2)+'px';line.style.top=y1+'px';line.style.width=Math.abs(x2-x1)+'px';}else{line.style.left=x1+'px';line.style.top=Math.min(y1,y2)+'px';line.style.height=Math.abs(y2-y1)+'px';}document.body.appendChild(line);lines.push(line);}function clearLines(){lines.forEach(line=>line.remove());lines=[];}overlay.addEventListener('mousemove',function(e){var el=document.elementFromPoint(e.clientX,e.clientY);if(el&&el!==overlay){var rect=el.getBoundingClientRect();info.innerHTML='Element: '+el.tagName.toLowerCase()+(el.className?' .'+el.className:'')+'
Size: '+Math.round(rect.width)+'×'+Math.round(rect.height)+'px
Position: ('+Math.round(rect.left)+', '+Math.round(rect.top)+')';info.style.left=(e.clientX+10)+'px';info.style.top=(e.clientY+10)+'px';}});overlay.addEventListener('click',function(e){var el=document.elementFromPoint(e.clientX,e.clientY);if(el&&el!==overlay){var rect=el.getBoundingClientRect();clearLines();createLine(rect.left,rect.top,rect.right,rect.top,'horizontal');createLine(rect.left,rect.bottom,rect.right,rect.bottom,'horizontal');createLine(rect.left,rect.top,rect.left,rect.bottom,'vertical');createLine(rect.right,rect.top,rect.right,rect.bottom,'vertical');}});window.elementRuler={destroy:function(){overlay.remove();info.remove();s.remove();lines.forEach(line=>line.remove());delete window.elementRuler;}};})();
Size: '+Math.round(rect.width)+'×'+Math.round(rect.height)+'px
Position: ('+Math.round(rect.left)+', '+Math.round(rect.top)+')';info.style.left=(e.clientX+10)+'px';info.style.top=(e.clientY+10)+'px';}});overlay.addEventListener('click',function(e){var el=document.elementFromPoint(e.clientX,e.clientY);if(el&&el!==overlay){var rect=el.getBoundingClientRect();clearLines();createLine(rect.left,rect.top,rect.right,rect.top,'horizontal');createLine(rect.left,rect.bottom,rect.right,rect.bottom,'horizontal');createLine(rect.left,rect.top,rect.left,rect.bottom,'vertical');createLine(rect.right,rect.top,rect.right,rect.bottom,'vertical');}});window.elementRuler={destroy:function(){overlay.remove();info.remove();s.remove();lines.forEach(line=>line.remove());delete window.elementRuler;}};})();