HTML-элемент, разделенный пополам горизонтальной линией (на ее талии)

Question

Долгосрочный lurker здесь. Это мой первый пост (и я инженер-электрик, а не программист).

Я хотел бы иметь элемент в HTML, для которого я могу обнаружить щелчок по его верхней половине и нижней половине. В частности, предположим, что у меня есть большая числовая цифра, и если вы нажмете над своей «талией», она увеличивается, и если вы нажмете ниже ее талии, она уменьшится. Затем мне нужно поместить несколько из них рядом друг с другом, например, «раздвижной лоскут» на вокзале.

У меня уже есть все javascript, работающие только для инкремента, но я хочу, чтобы было проще уменьшать, вместо того, чтобы обернуть все вокруг с помощью многих кликов. Я до сих пор избегал использования jquery, поэтому, если вы можете думать о способе только для HTML, я бы хотел услышать об этом.

Я понимаю, что, вероятно, мне придется обернуть два меньших контейнера (верхний и нижний) в контейнер большего размера, но как получить текст, чтобы покрыть высоту обоих внутренних контейнеров? Я, вероятно, хочу избежать резки шрифта пополам и обновлять верхний и нижний отдельно.

Спасибо, Paul

Answer 1

Это должны работы:

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 является элементом, который вы хотите применить этот эффект на