Question

我想将href作业移至CSS。

类似于<a style="href: url('Home.htm');">Home</a>而不是<a href="Home.htm">Home</a>。

是否可以在CSS中执行此操作？

我的网站中有几个位置的按钮，相应的网址值可能会在将来发生变化。我想只在一个地方更改目标地址，即我的CSS文件，而不必为该按钮的每个实例手动更改它们。

Answer 1

此行为并未得到真正支持，如其他答案所述。但是，如果您确实需要在页面上使用此功能，则可以使用某些JavaScript添加它。 CSS中使用定义的自定义变量/属性需要以--开头，我将使用名称--href-override。

我们会在文档中的链接上收听所有mousedown和touchstart个事件。这些事件很有用，因为它们总是在注册点击之前发生。每次我们处理其中一个事件时，我们都会检查相关链接是否在CSS中定义了--href-override属性/变量。如果是这样，我们会将HTML href替换为CSS --href-override值，并且浏览器会在处理点击事件时自动使用该新值。

＆＃13;
＆＃13;
function overrideEventTargetHref(event) { // if it's the beginning of a click on a link... if (event.target.tagName === 'A') { var link = event.target; var override = getComputedStyle(link).getPropertyValue('--href-override').trim(); // if the link has an CSS href-override and it's different than the HTML href... if (override && override != link.href) { // replace the HTML href with the CSS href-override link.href = override; } } } window.addEventListener('mousedown', overrideEventTargetHref, false); window.addEventListener('touchstart', overrideEventTargetHref, false);
＆＃13;
.override { --href-override: https://stacksnippets.net/; }
＆＃13;
<a href="https://example.com">actually example.com</a> <a href="https://example.com" class="override">secretly stacksnippets.net</a>
＆＃13;
＆＃13;
＆＃13;

这也适用于中间点击以在新标签页中打开的内容。

这是一个非常黑客，你通常不想这样做。但如果您的情况需要，您可以。

Answer 2

CSS是样式表，所以简短的回答是否定的。也不完全确定你想要的是什么，但如果由于数据的变化，请使用JavaScript或PHP代替。更容易，更合乎逻辑，更可行。

Answer 3

href属性代表超文本引用。它不是一个适合造型的实体;见resource。如果您希望设置该位置的文本值在页面上的显示方式，您可以编写用于设置标记样式的代码，如果您想获得更好的功能，可以添加一对span标记，如下所示：

CSS：

a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}

a:hover {
  border: 3px solid #009;
}

span {
color: #f0f;
}

<a href='Home.htm'"><span>Home</span></a>

至于更改按钮的值，如果你运行Linux，它提供了各种有用的实用程序，如grep;见discussion。另请参阅此article。

是否可以修改＆＃34; href＆＃34;在样式表中？

3 个答案: