不同高度的定位元件

时间:2018-06-27 19:03:46

标签: javascript html css

抱歉,标题含糊,但我不确定该如何称呼。我正在使用HTML和JavaScript进行作业计划,但是在尝试创建一项功能以将您的文本对齐到最近的行时遇到了一个问题。

The planner itself looks like this

“对齐到线”功能通过检查音符(是输入元素)的Y坐标并检查最近的线来工作。我知道这不是一个好习惯,但是为了使一切变得容易,所有都是固定大小,所以我有一个可以捕捉到的每行Y坐标的数组:

[58,80,102,124,146,168,190,212,234,257,279,301,323,345,367,389,411,434,458,480,502,524,546,568,590,612]

当用户创建便笺或更改便笺的位置时,将运行以下代码:

let height = parseInt(window.getComputedStyle(e.target).getPropertyValue('height'));
e.target.style.top = getClosest(yCoord+(height/2))-(height/2)

因此它获取元素的高度,然后找到最接近线的Y坐标,然后减去元素高度的一半以找到合适的坐标。

我随意使用height / 2而不是height。我以为,由于坐标是直线,因此它需要精确地向上height高,这很有意义,但是在实践中,无论出于什么原因,height/2都可以让我更好,有些更好的结果。

但是,如果我使用该功能,则无法正常工作。我尝试了许多不同的方法,但似乎无法弄清楚。 This is the result。如您所见,它对于较小的高度效果很好,但是好像相对于影响位置的元素的高度存在偏移。是因为我的方法非常错误而引起的问题吗? (可能)还是只是我忘记了一些因素?

没有边框,没有边距,填充只有1px,但这没关系,因为我使用getComputedStyle(我认为应该考虑到所有因素)来找到高度而不是字体大小。 / p>

围绕此功能的代码只是一个相当大的项目中的一小部分,但是我要发布整个文档,以便更容易解决此问题。

谢谢!

注意:带有计划程序的窗口是弹出窗口,因此您的浏览器可能会阻止它

The code (too many characters for this post so it's on pastebin)

编辑:我认为我发现了问题,就在发布此消息时发现它也就不足为奇了。首先,我需要使用height而不是height/2(这不足为奇,很有意义)。我虽然需要使用height/2,因为我正在以较小的高度进行测试,并且捕捉点偏离了几个像素(准确地说是7个像素),这使height/2看起来更好。第二,主要问题是,由于我使用height而不是font-size,所以高度是整个元素的高度,这意味着P的底部碰到了线而不是越过了线。

0 个答案:

没有答案