HTML元素由水平線分割成兩半（在腰部）

這裏是長時間的潛伏者。這是我的第一篇文章（我是電氣工程師，而不是程序員）。HTML元素由水平線分割成兩半（在腰部）

我想在HTML中有一個元素，我可以檢測到它的上半部分和下半部分的點擊。具體來說，假設我有一個很大的數字，如果你點擊它的「腰部」，它會增加，如果你點擊它的腰部，它會減少。然後我需要將其中的幾個放在一起，就像在火車站的「分瓣顯示」。

我已經有了所有的JavaScript工作增量只，但我想讓它更容易遞減，而不是必須包裝所有的方式與許多點擊。我迄今爲止避免使用jquery，所以如果你能想到一個HTML的唯一方法來做到這一點，我很樂意聽到它。

我意識到我可能不得不將兩個較小的容器（上部和下部容器）包裝到一個更大的容器中，但是如何讓文本覆蓋兩個內部容器的高度？我可能想要避免將字體分成兩半，分別更新上下。

感謝，保羅

來源

2013-09-27 Paul

這種效果能否請您發表你到目前爲止的代碼元素？如果可能的話在jsfiddle.net上進行演示？ –

是的，請密碼。從概念上講，這很容易......在html方面，你需要一個具有兩個內部元素的元素，每個內部元素使用一半的父元素。那麼你所要做的就是將一個事件附加到上層元素來增加，而下層元素的事件減少。 –

你想要什麼代碼？ JavaScript或HTML？現在它實際上只是一個 0，並且當檢測到點擊時我將它更新爲 1。我的JavaScript與Markasoftware在下面提到的類似：只是一個點擊監聽器（對於觸摸屏來說，它是一個不同的監聽器）。 – Paul

這應該工作：

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是你想申請上

來源

2013-09-27 02:28:08 Markasoftware

它確實工作http://jsfiddle.net/FemZ7/非常好 –

它的工作原理！非常感謝Markasoftware！我試圖給你一個upvote，但我需要更多的聲望點來這樣做。 – Paul

@Paul謝謝！如果答案能夠回答您的問題，您可以點擊投票計數器下面的小複選標記。這個「接受」了這個問題，給了你2個聲望，並給了我15個。 – Markasoftware

HTML元素由水平線分割成兩半（在腰部）

回答

相關問題