HTML 元素按水平线(在其腰部）分成两半

HTML Element Divided in Half by Horizontal Line (at its waist)

本文关键字：腰部 元素 水平线 HTML      更新时间：2023-09-26

长期潜伏在这里。这是我的第一篇文章(我是一名电气工程师，不是程序员(。

我想在 HTML 中有一个元素，我可以检测到其上半部分和下半部分的点击。具体来说，假设我有一个大的数字，如果你点击它的"腰部"上方，它就会递增，如果你点击它的腰部下方，它就会递减。然后，我需要将其中几个并排放置，就像火车站的"分体式翻盖显示器"一样。

我已经让所有的 javascript 都只用于增量，但我想让它更容易减少，而不必通过多次点击来一直环绕。到目前为止，我一直避免使用jquery，所以如果你能想到一种仅限HTML的方法来做到这一点，我很想听听。

我

意识到我可能不得不将两个较小的容器(上部和下部(包装成一个较大的容器，但是如何让文本覆盖两个内部容器的高度？我可能想避免将字体切成两半并分别更新上下字体。

谢谢保罗

这应该有效：

element.addEventListener('click',function(e){
    //here's the bounding rect
    var bound=element.getBoundingClientRect();
    var height=bound.height;
    var mid=bound.bottom-(height/2);
    //if we're above the middle increment, below decrement
    if(e.clientY<mid)
        ;//we're above the middle, so put some code here that increments
    else
        ;//we're below the middle, so put some code here that decrements
},false);

element是您希望应用此效果的元素

相关文章：