spacingjs实现网页元素测量空间距离修改代码-html代码-BFW代码库

spacingjs实现网页元素测量空间距离修改代码

代码语言：html

所属分类：其他

代码描述：spacingjs实现网页元素测量空间距离修改代码，按住alt键，选择某个元素就会显示该元素的长高及父元素之间的距离。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Spacing.js</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.2.7.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/spacingjs.js" defer></script>
</head>
<body class="bg-gray-50">
<div class="container mx-auto max-w-4xl p-4">
<h1 class="text-center text-5xl sm:text-9xl font-bold tracking-tight mt-24 mb-12 sm:mt-32 sm:mb-14">
Spacing.js
</h1>
<p class="text-center text-lg sm:text-2xl max-w-lg mx-auto text-gray-400">
A JavaScript utility for measuring the spacing between elements on webpage
</p>
<h2 class="text-center text-3xl font-bold mt-24 mb-12">How to use</h2>
<div class="flex">
<div class="w-full bg-white p-8 rounded-md shadow-md text-center">
<span class="
              bg-black
              rounded-full
              flex
              justify-center
              items-center
              w-8
              h-8
              text-white text-xl
              font-bold
              mx-auto
              mb-6
            ">1</span
          >
Include
<div class="font-mono text-sm bg-gray-100 p-2 rounded my-2 overflow-auto">
&lt;script src=&quot;//repo.bfw.wiki/bfwrepo/js/spacingjs.js&quot; defer&gt;&lt;/script&gt;
</div>
in your HTML page.
</div>
</div>
<div class="flex gap-6 flex-wrap mt-6">
<div class="w-full md:flex-1 bg-white p-8 rounded-md shadow-md text-center">
<span class="
              bg-black
              rounded-full
              flex
              justify-center
              items-center
              w-8
              h-8
              text-white text-xl
              font-bold
              mx-auto
              mb-6
            ">2</span
          >
Move your cursor to an element and press
<kbd class="bg-gray-200 py-1 px-2 text-md rounded border-b-4 border-gray-300">Alt</kbd>
on Windows, or
<kbd class="bg-gray-200 py-1 px-2 text-md rounded border-b-4 border-gray-300">Option</kbd>
on a Mac.
</div>
<div class="w-full md:flex-1 bg-white.........完整代码请登录后点击上方下载按钮下载查看