3

我对 Javascript 很陌生（但不是编程）。我的页面中有两个现成的功能，它们可以分别很好地工作：

  1. <p>一种是更改某些元素中的字体大小。
  2. 另一个神奇地将<p>元素分成几行，并用<span>. 这样我可以突出显示指针悬停在其上方的行。

当使用第一个函数来增加字体大小时（比如说，单击一个按钮），整个行结构发生了变化，并且<span>s 不再位于正确的位置。

所以基本上我希望我的字体大小增加按钮首先“撤消”第二个功能的动作。

我的问题是我是否必须手动编写一个函数来撤消段落的换行符（删除<span>s），或者 Javascript 是否能够将页面恢复到调用函数之前的某个点？

4

4 回答 4

2

您不能“撤消”函数调用。你想要做的是p像这样剥离标签内的 HTML 标签：

pelement.innerHTML = pelement.innerText;

这剥夺了所有span元素。您可以增加字体大小并在之后应用您的 spanify 功能。

Derija93 的一个重要提示：这种技术确实会去除段落中的每个 HTML 标记，而不仅仅是span标记。

jwatt1980 的另一个重要提示：innerText不是 100% 跨浏览器兼容。有关详细信息，请参阅链接：http ://www.quirksmode.org/dom/w3c_html.html#t04

于 2012-08-04T22:38:06.533 回答
1

没有内置的方法。但是，您可以将更改保存到变量并恢复该变量以撤消。以下两个示例有点复杂，但我相信它们可以工作。

示例 1 — 将整个内容恢复为原始/页面加载格式：

<script>
var orignalContent;

function setContent(content) {
    document.getElementById('changableContent').innerHTML = content;
}

function getContent() {
    return document.getElementById('changableContent').innerHTML;
}

function resetContent() {
    updateContent(originalContent);
}

window.onload = function() {
    originalContent = getContent();

    document.getElementById('resetButton').onclick = resetContent;
};
</script>

示例 2 - 通过更改重置更改（可能会遇到较大的变量...您可以添加一种方法来限制撤消步骤）

<script>
var contentChanges;

function setContent(content, save) {
    if(save !== false) {
        contentChanges.push(content);
    }
    document.getElementById('changableContent').innerHTML = content;
}

function undoChange() {
    setContent(contentChanges.pop(), false);
}

window.onload = function() {
    document.getElementById('undoButton').onclick = undoChange;
};
</script>
于 2012-08-04T22:47:25.610 回答
0

更改您的 addSpans 代码以向仅由 addSpans 使用的跨度添加一个额外的类。创建一个名为 undoSpans 的新函数。它使用 jquery 通过获取该类的所有元素来获取所有跨度。然后它可以遍历它们，调用 .innerHTML() 并将结果插入父节点，然后删除跨度。此时，您可以调整字体大小，然后重新跨度。

于 2012-08-04T23:08:54.930 回答
0

您将需要编写自己的函数。一种可能性是在转换之前存储文本的原始状态，例如使用公共变量或隐藏元素。您还可以使用element.getElementsByTagName()获取元素中的所有跨度并使用 重建文本element.innerHTML。

这样的事情可能会“撤消”跨度。

var pList = document.getElementsByTagName('p'); //get all p elements
var p, s, sList, text;

for (p = 0; p < pList.length; p++) {
   sList = pList[p].getElementsByTagName('span'); //get all spans within a p
   text = '';

   for (s = 0; s < sList.length; s++) 
      text += sList[s].innerHTML + ' '; //reconstruct the text

   pList[p].innerHTML = text; //update the p back to non-span text
}

如果您只想删除某个类的跨度，您可以使用类似这样的内容更新第二个 for 循环

for (s = 0; s < sList.length; s++) {
   if (s.className && s.className != 'classname') {
      text += (sList[s].outerHTML) ? sList[s].outerHTML : '<span class="' + sList[s].className + '">' + sList[s].innerHTML + '</span>';
   } else {
      text += sList[s].innerHTML + ' ';
   }
}
于 2012-08-04T22:50:56.313 回答