如果用户禁用了 JavaScript，有没有办法渲染锚点，但如果用户在 SvelteKit 中启用了 JavaScript，则渲染按钮？

Question

我正在使用 SvelteKit，我正在尝试渲染一个锚元素，为没有 JavaScript 的用户打开登录页面，但如果用户启用了 JavaScript，则渲染一个打开模态的按钮，以获得更好的用户体验。我该怎么做？

目前，我正在这样实现它（该组件接受 href 并将其呈现为样式为按钮的锚元素）：

<Button
href="/login"
on:click={(e) => {
 e.preventDefault();
 modalStore.trigger(modal);
}}
id="toggleAuthBtn"
>
Login
</Button>

但是，这对于可访问性不太友好，因为它被渲染为锚元素。

Answer 1

在这两种情况下我都会使用锚元素。显示模式时，您可能希望更改 URL，以便它包含指示显示模式的内容，以便用户可以将 URL 添加为书签/将 URL 发送给其他人，并且在访问该 URL 时将立即显示模式。

但是如果你愿意的话，将其显示为按钮并没有什么问题，但是如果用户启用了客户端 JS，我会有条件地向锚元素添加一个类，将其样式设置为看起来像按钮。

<script>
    import { browser } from '$app/environment';
</script>

<a
    class:button={browser}
>
    ...
</a>

<style>
    .button{
        /* Make it look like a button here... */
    }
</style>