使用另一个元素的原生 css 设置一个元素的样式答案

【问题标题】：style one element with the native css of another使用另一个元素的原生 css 设置一个元素的样式
【发布时间】：2016-10-01 02:20:37
【问题描述】：

我想实现一段文本，其中一些单词的样式为<a> 标签，具有浏览器的本机样式。

这些词可能真的在带有 href 属性的 <a> 标记中，以将用户引导到另一个 url，或者它们可能在带有 js onclick 功能的伪装的 <span> 标记中。

如何获取<a> 标签的原生样式属性并将它们应用到我的<span> 标签？

【问题讨论】：

【解决方案1】：

很简单：你不需要。

您可以使用 SASS 和 LESS 扩展元素的属性，但不能使用特定标签的原生属性。更简单的方法是为这两个元素赋予相同的 css 类并相应地设置它们的样式。

这不应该是一场噩梦，因为 <a> 和 <span> 标记在页面流中的行为方式非常相似。

【讨论】：

我不喜欢接受任何不可能的事情。也许你是对的，但我想在接受这个答案之前做更多的研究，看看是否还有更多的回应。例如，我发现更新后的用户代理样式表在 GitHub 上可用：link

【解决方案2】：

获取<a>元素的target属性值：

var x = document.getElementById("myAnchor").getAttribute("target");

获取<button>元素的onclick事件属性值：

var x = document.getElementById("myBtn").getAttribute("onclick");

找出<button> 元素是否有onclick 属性：

var x = document.getElementById("myBtn").hasAttribute("onclick");

使用id="myAnchor" 获取<a> 元素

var x = document.getElementById("myAnchor");

如果<a>元素有目标属性，则将值设置为"_self"

if (x.hasAttribute("target")) {      
    x.setAttribute("target", "_self");
}

【讨论】：