替换href属性onclick

Question

我正在尝试在用户点击链接时修改href属性。我正在使用一个名为stylesheetswitcher的脚本来切换CSS样式，并希望在单击一个链接时在两种样式之间跳转。

这是链接HTML：

<a href="javascript:chooseStyle('style1')"">switch style</a>

我希望点击后href更改为“style2”。

Answer 1

更新回答：

感谢您澄清您的要求。

如styleswitcher JS页面所述，您需要做的一些事情才能实现这一目标：

您需要将title属性分配给头脑中的<link>标签

假设您有以下样式表链接：

<link rel="stylesheet" href="css/style1.css">
<link rel="alternate stylesheet" href="css/style2.css">

您需要通过添加title属性来标记它们，如下所示：

<link rel="stylesheet" href="css/style1.css" title="style1">
<link rel="alternate stylesheet" href="css/style2.css" title="style2">

为自己写一个样式交换功能

function swapStyles () {
    if ( this.getAttribute('data-active-style').value === 'style1' ) {
        // Switch styles
        chooseStyle('style2',30);
        // Set the active style
        this.setAttribute('data-active-style','style2');
    } else {
        // Switch styles
        chooseStyle('style1',30);
        // Set the active style
        this.setAttribute('data-active-style','style1');
    }
    return this;
}

向<a>

添加事件监听器

您可以使用HTML onclick属性

执行此操作

<a href="javascript:;" onclick="swapStyles()">switch styles</a>

或者，您可以在Javascript中添加事件监听器：

document.querySelectorAll('a')[0].addEventListener('click', function () {
    swapStyles();
}, true);

---

Check this Fiddle

最好像切换功能一样，如下所示：

function toggleStyle () {
    if ( this.className.indexOf('style1') > -1 )
        this.className = 'style2';
    else
        this.className = 'style1';
}

此外，您应该从href属性中取出该Javascript。相反，在Javascript中添加event listener：

function toggleStyle () {
    if ( this.className.indexOf('style1') > -1 )
        this.className = 'style2';
    else
        this.className = 'style1';
}

// Wait for window to load
window.onload = function () {

    // Add event listener
    document.querySelectorAll('a')[0].addEventListener('click', toggleStyle, true);

};