使用 Javascript 从链接中删除不需要的 CSS

【问题标题】：Removing unwanted CSS from a link with Javascript使用 Javascript 从链接中删除不需要的 CSS
【发布时间】：2012-05-26 19:26:46
【问题描述】：

我需要我们网站上的链接不继承页面的 CSS 规则 - 目前它显示有边框和下划线等，这对于该特定链接来说是不可取的。

我似乎隐约记得能够将 href 更改为 <a href="javascript:;"></a>，它有效地覆盖了 CSS，但我不记得如何使链接转到所需的页面。可以填我吗？谢谢！

【问题讨论】：

有什么违规的 CSS 规则？
链接实际上是一张图片。我们网站上的所有图像都添加了填充和边框。我只模糊地记得覆盖 CSS 的 javascript 解决方案，而不管有什么规则（在以后添加这些规则的情况下很有用）。
为什么不给链接添加一个css类来重置css样式呢？
要回答有关使链接转到所需页面的问题，您可以使用href="javascript: document.location.href='http://www....';" 但您应该遵循@bfavaretto 的回答。

【解决方案1】：

您必须覆盖样式表上定义的样式。有几种方法可以做到这一点（下面的示例将颜色设置为红色，但实际上您必须设置 border: 0; text-decoration: none;）。

内联样式

<a href="#" id="thelink" style="color:#f00;">link text</a>

JavaScript

document.getElementById('thelink').style.color = '#f00';

外部 CSS 或 <style> 块（如果您可以为此元素添加特定的 CSS 规则）

#thelink { color: #f00; }

如果由于某些更具体的选择器优先，上述方法不起作用：

#thelink { color: #f00 !important; }

【讨论】：