Question

我是Javascript的新手（但不是编程）。我的页面中有两个现成的函数可以单独运行：

可以更改某些元素中的字体大小。
另一个神奇地将元素分成几行，并用包装每一行（如当前浏览器显示中所示）。这样我就可以突出显示指针悬停的行。

使用第一个函数增加字体大小（例如，单击按钮）时，整个线条结构会发生变化，不再位于正确的位置。

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

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

Answer 1

您无法“撤消”函数调用。您要做的是在p标记内删除HTML标记，如下所示：

pelement.innerHTML = pelement.innerText;

所有span元素的条带。您可以增加字体大小并随后应用spanify功能。

Derija93的一个重要提示：此技术会删除段落中的每个HTML标记，而不仅仅是span标记。

jwatt1980的另一个重要提示：innerText并非100％跨浏览器兼容。请参阅链接以获取更多信息：http://www.quirksmode.org/dom/w3c_html.html#t04

Answer 2

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

示例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>

Answer 3

您需要编写自己的功能。一种可能性是在变换之前存储文本的原始状态，例如使用公共变量或隐藏元素。您还可以使用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
}

如果你只想删除某个类的span，你可以用这样的东西更新第二个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 + ' ';
   }
}

Answer 4

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

“撤消”Javascript中的DOM操作函数

4 个答案: