替换href属性onclick

Replace href attribute onclick

本文关键字：onclick 属性 href 替换      更新时间：2023-09-26

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

链接HTML:

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

我希望href更改为"style2"时点击

更新后的答案:

谢谢你澄清你的要求。

正如在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);

检查这个提琴

最好创建一个像这样的切换函数:

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

此外，您应该将该Javascript从href属性中取出。相反，在Javascript中添加一个事件侦听器:

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);
};
相关文章：