Finden Element nach Daten-ID und erhalten linken Stil

Question

Also statt meine fillRect hardcoding ich möchte es die linke Stil direkt aus dem Region-Tag. Wenn es ein id hätte, würde ich einfach so tun:

var testIdLeft = document.getElementById("testId").style.left 

So wäre es etwa so aussehen:

fillRect(testIdLeft, 0, 100, 20) 

Aber ich weiß nicht, wie sie mit Daten-Attribute zu tun, denke ich, es heißt. S o was ich tun möchte ist, den linken Stil von jedem Regions-Tag zu bekommen und es in meine fillRects einzugeben.

var c = document.getElementById("myCanvas"); 
 
var ctx = c.getContext("2d"); 
 
ctx.fillStyle = "#FF0000"; 
 
ctx.fillRect(38,0,100,20); 
 

 
var ctz = c.getContext("2d"); 
 
ctz.fillStyle = "FF0000"; 
 
ctz.fillRect(100,22, 100, 20);

canvas { 
 
    margin-left:-8px; 
 
    
 
}

<region class="wavesurfer-region" title="0:01-0:02" data-id="1" style="position: absolute; z-index: 2; height: 100%; top: 0px; left: 38px; width: 1px; cursor: default; background-color: rgb(25, 170, 141);"></region> 
 
<region class="wavesurfer-region" title="0:05-0:05" data-id="2" style="position: absolute; z-index: 2; height: 100%; top: 0px; left: 100px; width: 1px; cursor: default; background-color: rgb(25, 170, 141);"></region> 
 

 

 

 
<canvas id="myCanvas" width="500%" height="100%" style="border:1px solid #c3c3c3;">

Answer 1

Sie jQuery verwenden können Elemente auf der Grundlage ihres Datenattribut zu erhalten, zum Beispiel:

$("[data-id='" + id + "']") 

Und dann können Sie .get(0) verwenden, um die DOM-Version des jquery zu bekommen Objekt, das dann ermöglicht Ihnen, "reines" Javascript wie zuvor zu verwenden:

$("[data-id='" + id + "']").get(0).style.left; 

Beispiel für Code in der Frage:

$("[data-id='1']").get(0).style.left; 

Alternativ können Sie auch mit jquery halten können:

$("[data-id='" + id + "']").position().left; 
$("[data-id='" + id + "']").offset().left; 

Ob Sie position oder offset, hängt von Ihren Anforderungen, für weitere Informationen die doc überprüfen : http://api.jquery.com/offset/