我想通过单击跨度来循环显示纯文本下划线和划线

Question

如上所述，我希望在单击 span 时让 JS 循环通过 textDecoration。我在另一个我找不到的答案中找到了这个片段并（试图）修改它。

HTML

<div id="container">
            <span>A</span> <span>B</span> <span>C</span> <span>D</span> 
        </div>

JS

var container = document.getElementById("container");
if (container.addEventListener) {
    container.addEventListener('click', clickHandler, false);
}
else if (container.attachEvent) {
    container.attachEvent('onclick', function(e) {
        return clickHandler.call(container, e || window.event);
    });
}

function clickHandler(event) {
    var span = event.target;
    if (span.style.textDecoration == 'none') {
        span.style.textDecoration = 'underline'
    }
    else if (span.style.textDecoration == 'underline') {
        span.style.textDecoration = 'line-through'
    }
    else if (span.style.textDecoration == 'line-through') {
        span.style.textDecoration = 'none'
    }
}

我认为问题在于使用 span 作为对象，但我不确定如何更正确地做到这一点。

Answer 1

原因是因为：

Element.style returns the inline style used in HTML document and since the style is not set directly in HTML you will get an empty value

所以，我一开始就设置为none。然后它会起作用。看看为什么

var container = document.getElementById("container");
var spans = document.querySelectorAll('span')
for (let i = 0; i < spans.length; i++) {
   spans[i].style.textDecoration = "none" // setting default
}

container.addEventListener('click', function(e) {
    clickHandler(e)
});

function clickHandler(event) {
    var span = event.target;
    if (span.style.textDecoration == 'none') {
        span.style.textDecoration = 'underline'
    }
    else if (span.style.textDecoration == 'underline') {
        span.style.textDecoration = 'line-through'
    }
    else if (span.style.textDecoration == 'line-through') {
        span.style.textDecoration = 'none'
    }
}

<div id="container">
      <span>A</span><span>B</span><span>C</span><span>D</span> 
</div>

Answer 2

尝试使用

span.style.textDecoration == ''

而不是

span.style.textDecoration == 'none'

同时分配：

span.style.textDecoration = ''

而不是

span.style.textDecoration = 'none'

我想通过单击跨度来循环显示纯文本下划线和划线

I want to cycle through plain text underline and line-through by clicking on a span

javascript

dom

click