Question

因此，我希望它直接从region标签中取出左侧样式，而不是对我的fillRect进行硬编码。如果它有一个 id ，我会这样做：

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

所以它看起来像这样：

fillRect(testIdLeft, 0, 100, 20)

但是我不知道如何使用data-attribute来实现它我认为它被称为。我想要做的是从每个区域标签中获取左侧样式并将其输入我的fillRects。

＆＃13;

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);

＆＃13;

canvas {
  margin-left:-8px;
  
}

＆＃13;

<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;">

＆＃13;

Answer 1

您可以使用jquery根据数据属性获取元素，例如：

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

然后您可以使用.get(0)获取jquery对象的DOM版本，然后允许您像以前一样使用“纯”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/

按data-id查找元素并获得左侧样式

1 个答案: