Question

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

我的代码：

＆＃13;

    var border_style = "2px dotted RED"
    document.querySelectorAll('span').forEach(function (node) {
        node.addEventListener('click', function (e) {
            if (e.target.style.border != "") {
                e.target.style.border = ""
            } else {
                e.target.style.border = border_style
            }
        })
    })

＆＃13;

<span id="a">
    span a
</span>

<span id="b">
    span b
</span>

＆＃13;

那么，如何在添加和删除边框时保持两个跨度？

Answer 1

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

将默认样式设置为border: 2px solid transparent。
添加负左侧和上边距以抵消块的移动。
使用box-sizing: border-box在元素大小（CSS3）中包含边框。

Answer 2

添加透明边框以开始。

＆＃13;

var border_style = "2px dotted RED"
var non_border_style = "2px dotted transparent"

document.querySelectorAll('span').forEach(function(node) {
  node.style.border = non_border_style

  node.addEventListener('click', function(e) {
    if (e.target.style.borderColor !== 'transparent') {
      e.target.style.border = non_border_style
    } else {
      e.target.style.border = border_style
    }
  })
})

＆＃13;

<span id="a">
    span a
</span>

<span id="b">
    span b
</span>

＆＃13;

Answer 3

您可以添加border: 2px solid transparent（css）作为占位符：

var border_style = "2px dotted RED"
    document.querySelectorAll('span').forEach(function (node) {
        node.addEventListener('click', function (e) {
            if (e.target.style.border != "") {
                e.target.style.border = ""
            } else {
                e.target.style.border = border_style
            }
        })
    })

span{
  border: 2px solid transparent
    }

<span id="a">
    span a
</span>

<span id="b">
    span b
</span>

Answer 4

您可以简单地修复此方法，添加白色边框或透明边框以跨越

    var border_style = "2px dotted RED"
    document.querySelectorAll('span').forEach(function (node) {
        node.addEventListener('click', function (e) {
            if (e.target.style.border != "") {
                e.target.style.border = ""
            } else {
                e.target.style.border = border_style
            }
        })
    })

<style>
  span { border:2px dotted #fff; }
</style>

<span id="a">
    span a
</span>

<span id="b">
    span b
</span>

Answer 5

只需更改与背景颜色相同的边框颜色，而不是删除边框。

var border_style =“2px点缀红色”

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
        }
    } )
} );

如何在添加和删除边框时保持两个跨度？

5 个答案: