基于数据属性的css/html自定义href答案

【问题标题】：css/html custom href based on data attribute基于数据属性的css/html自定义href
【发布时间】：2017-09-05 20:48:51
【问题描述】：

是否可以根据data-schemaid="my-id-name"等数据属性创建自定义href

我见过的所有示例都使用 id。

例如：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy&stacked=h

我的 html 是动态生成的，没有 class 或 id，而是看起来像这样：

<div data-schemaid="my-id-name"></div>

我尝试使用与示例相同的逻辑，但这不起作用。

【问题讨论】：

你的意思是如果你有一个带有href="my-id-name" 的锚标签，它会带你到一个属性为data-schemaid="my-id-name" 的元素？

标签： javascript html css

【解决方案1】：

如果我正确地假设您想要一个具有href="my-id-name" 的锚标记将您带到具有属性data-schemaid="my-id-name" 的元素，那么只需找到该元素并在其上调用scrollIntoView(true)。如果想为滚动设置动画，请参阅answer (uses jQuery)

//use getAttribute("href") instead of this.href as 
//this.href will get a url based on the actual href attribute
var schemaid = this.getAttribute("href");

//use css attribute selector to find the target element
var target = document.querySelector(`[data-schemaid="${schemaid}"]`);
if(target){
  target.scrollIntoView(true);
}

演示

document.querySelector('#anchor').addEventListener("click",function(event){
   event.preventDefault();
   var schemaid = this.getAttribute("href");
   var target = document.querySelector(`[data-schemaid="${schemaid}"]`);
   if(target){
     target.scrollIntoView(true);
   }
});

.spacer {
  height:1440px;
}

<a id="anchor" href="my-schemaid">Click me</a>
<div class="spacer"></div>
<div data-schemaid="my-schemaid">The target div</div>
<div class="spacer"></div>

【讨论】：

我试图了解您提供此解决方案的原因。首先，在搜索id 时使用querySelector 比getElementById 慢。接下来，当问题未使用 JQuery 标记时，您提供了 JQuery 答案。三、这个语法是什么：${schemaid}？接下来，为什么不直接使用element.dataset 属性（专门用于获取data-* 属性）......
...最后，为什么不按照 OP 的要求设置实际的 href 属性，而不是取消本机点击事件，然后调用一个完全符合本机点击事件的方法，如果href 属性设置了吗？
@ScottMarcus，演示的性能无关紧要，但 querySelector 恰好用于演示。至于 jQuery 链接的答案，它只是一个旁注，这就是为什么我特别提到它是基于 jQuery 的，以防他们想尝试平滑滚动。至于${schemaid}，它是template literals 的表达式。我为什么要使用element.dataset？我没有从 div 中检索该值，因为它是我们要查找的元素。
对于使用href属性，该属性会返回一个url，所以如果属性是my-id，它将使用它来创建一个url，例如：http://example.com/my-id，这不是div 的data-schemaid 的值。本机点击会从当前页面进行页面导航。 href 没有使用主题标签，例如#someanchor，因此它不会执行诸如转到该锚点之类的本机操作，这就是我们取消事件并自己将元素置于视图中的原因
我想我的总体评论是您的解决方案过于复杂。如果href 只是在其前面加上#，则无需取消锚的本机事件。此外，您将使用dataset 属性，因为您正在从div 检索该值。这实际上是问题的全部意义所在。模板文字，好的，但为什么呢？这个答案似乎是试图将尽可能多的不需要的代码塞进一个非常简单的解决方案中。

【解决方案2】：

是的，您可以根据任何其他元素的任何方面设置元素的任何方面。您确实需要选择应该发生这种情况的时间点（在页面加载时、在单击另一个元素时等）。

这是一个示例，它设置了一个带有 href 的 <a> 元素，该元素在页面加载时与 div 的 data-schemaid 属性值匹配，并将该 a 元素附加到文档中（顺便说一下，您确实了解您显示的 div 的值本身不是有效的 URL，需要调整为有效才能导航到，对吧？如果您只想单击 <a> 进行导航（滚动）到<div>，你只需要在它前面加上一个“#”，如下所示。）：

// Set up an event handler for when the document is parsed and ready to be interacted with:
window.addEventListener("DOMContentLoaded", function(){
   // Scan the document for the dynamically generated div that has a `data-schemaid` attribute
   var theDiv = document.querySelector("div[data-schemaid]");
   
   var newA = document.createElement("a");      // Create a new <a> element
   newA.href = "#" + theDiv.dataset.schemaid;         // Set the href to the div's attribute value
   newA.textContent = "Click Me";               // Give the new <a> some text to click on
   document.body.appendChild(newA);             // Append the new <a> to the end of the body
});

<div data-schemaid="my-id-name">
</div>

或者，如果<a>元素已经存在于文档中（并且不需要附加），那么解决方案就简单一点：

// Set up an event handler for when the document is parsed and ready to be interacted with:
window.addEventListener("DOMContentLoaded", function(){
   // Scan the document for the dynamically generated div that has a `data-schemaid` attribute
   var theDiv = document.querySelector("div[data-schemaid]");
   
   var speicalA = document.getElementById("specialA");   // Get a reference to the <a> element
   speicalA.href = "#" + theDiv.dataset.schemaid;         // Set the href to the div's attribute value

});

<div data-schemaid="my-id-name">
</div>

<a id="specialA">Click Me</a>

【讨论】：