如何用JS书签脚本将网页主体内容设为反向？已尝试相关代码

架构老林

2026-5-20

网页Body内容反向显示的可行方案

嘿，这个需求挺有意思的！你用<bdo dir="rtl">来实现内容反向的思路方向是对的，但你当前的书签脚本存在一些小问题——直接替换document.body.innerHTML会丢失原DOM节点上绑定的事件（比如按钮点击、表单提交等交互逻辑会失效），而且部分嵌套元素可能会出现布局错乱。下面给你几个更靠谱的实现方案：

方案1：通过DOM节点移动实现（保留原有交互）

这个方法不会重新生成DOM内容，而是把body的子元素直接移动到<bdo>标签里，能完整保留原有事件绑定：

javascript:(function(){
  // 创建bdo元素并设置反向属性
  const rtlWrapper = document.createElement('bdo');
  rtlWrapper.dir = 'rtl';
  
  // 把body下的所有子元素逐一移到bdo中
  while(document.body.firstChild) {
    rtlWrapper.appendChild(document.body.firstChild);
  }
  
  // 把bdo放回body
  document.body.appendChild(rtlWrapper);
})();

方案2：用CSS样式实现（无DOM结构修改）

如果不想改动DOM结构，直接通过CSS属性控制反向显示是更轻量的选择，同样能达到类似效果，且完全不影响原有交互：

javascript:(function(){
  document.body.style.direction = 'rtl';
  document.body.style.unicodeBidi = 'bidi-override';
})();

若你只需要文本内容反向，而非整个布局翻转，可以把unicodeBidi的值改成embed，这样布局会保持原有流向，仅文本顺序反转。
如果需要恢复原样，只要执行document.body.style.direction = ''; document.body.style.unicodeBidi = '';即可。