Найти элемент по идентификатору данных и получить левый стиль

Question

Так что вместо hardcoding мой fillRect я хочу, чтобы он взял левый стиль непосредственно из тега области. Если он имел идентификатор я бы просто сделать так:

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

Так это будет выглядеть примерно так:

fillRect(testIdLeft, 0, 100, 20) 

Но я не знаю, как это сделать с данными атрибутом я думаю это называется. S o что я хочу сделать, это получить левый стиль от каждого тега региона и ввести его в мои fillRects.

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

Вы можете использовать JQuery, чтобы получить элементы на основе их атрибутов данных, например:

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

И тогда вы можете использовать .get(0), чтобы получить версию DOM в JQuery объект, который затем позволяет использовать «чистый» javascript по-прежнему:

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

Пример кода в вопросе:

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

В качестве альтернативы, вы можете держать с JQuery:

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

Используете ли вы position или offset, зависит от ваших требований, проверьте документ для получения дополнительной информации : http://api.jquery.com/offset/