Javascript 如何在添加和删除边框时使两个跨距保持静止？

单击跨度后，它将添加或删除虚线边框。您可以看到它们在添加或删除边框后稍微移动。我只想让他们保持安静

我的代码：

var border\u style=“2px点红色”
document.querySelectorAll（'span'）.forEach（函数（节点）{
node.addEventListener（'click'，函数（e）{
如果（e.target.style.border！=“”）{
e、 target.style.border=“”
}否则{
e、 target.style.border=边框样式
}
})
})

跨度a
跨度b

您可以简单地通过添加白色边框或透明边框来修复此问题

var border\u style=“2px点红色”
document.querySelectorAll（'span'）.forEach（函数（节点）{
node.addEventListener（'click'，函数（e）{
如果（e.target.style.border！=“”）{
e、 target.style.border=“”
}否则{
e、 target.style.border=边框样式
}
})
})

span{边框：2px点#fff；}
跨度a
跨度b

您可以添加

边框：2倍实心透明

（css）作为占位符：

var border\u style=“2px点红色”
document.querySelectorAll（'span'）.forEach（函数（节点）{
node.addEventListener（'click'，函数（e）{
如果（e.target.style.border！=“”）{
e、 target.style.border=“”
}否则{
e、 target.style.border=边框样式
}
})
})

span{
边框：2px实心透明
}

跨度a
跨度b

添加透明边框以开始

var border\u style=“2px点红色”
var non_border_style=“2px虚线透明”
document.querySelectorAll（'span'）.forEach（函数（节点）{
node.style.border=非边框样式
node.addEventListener（'click'，函数（e）{
如果（e.target.style.borderColor！=“透明”）{
e、 target.style.border=非边框样式
}否则{
e、 target.style.border=边框样式
}
})
})

跨度a
跨度b

有（至少）三种方法可以解决这个问题

将默认样式设置为

边框：2px实心透明

添加负左边距和上边距以抵消块的移动

用于在元素大小中包含边框（CSS3）

---

不要删除边框，只需将边框颜色更改为与背景颜色相同的颜色，比如说白色

var border_style=“2px点红色”

---

您最好将边框样式更改为透明（或类似于背景色）。下面是使用jquery和css的短得多的代码：框大小调整不起作用，因为默认情况下span元素是内联的。@这是真的。认为规则更一般，使边界白色限制了白色背景的解决方案。透明为您提供了更大的灵活性。对JS中应用初始样式和修复切换进行了更正。

var new_border_style = "2px dotted WHITE"

document.querySelectorAll( 'span' ).forEach( function ( node )
{
    node.addEventListener( 'click', function ( e )
    {
        if ( e.target.style.border == border_style )
        {
            e.target.style.border = new_border_style
        } else
        {
            e.target.style.border = border_style
        }
    } )
} );