Question

我希望我能尽可能地让自己变得清晰，在CSS和HTML方面我是一个真正的新手，但我在网上尝试最好的搜索。

我尝试使用Google Inspect翻译网站并将更改保存在我的电脑上。到目前为止，我已经能够使用名为＆＃34; Stylebot＆＃34;的扩展程序来完成它。

到目前为止我得到的是：

＆＃13;

._35oZDD6pOLbfsDeSjB48Da h1 {
  display: none;
}

._35oZDD6pOLbfsDeSjB48Da:after {
  content: "Painel de Controle";
  margin: 0;
  min-width: 0;
  font-size: 24px;
  font-weight: 400;
  color: #3c4858;
}

＆＃13;

<div class="_35oZDD6pOLbfsDeSjB48Da">
  <h1>Dashboard</h1>
  <div class="KnPkTluaZGwNajQrPdUXK title-help-wrapper">
    <div class="_1kb2R813ulFuiel2ebkDj3 title-help">
      <div class="_3Ow41suot3IX3Reh-6Xs4Y title-help-content">
        <div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

它完美无缺。

但我的问题是：如何编辑文本＆＃34;仪表板＆＃34;这里：

<a data-test-id="nav-link-dashboard" class="_35y4mNBXV8raOLGtBvhTmr O6aRKDJKQc5N9t_-J7iyI" href="/fb1117682158281014/dashboard">
    <div class="row middle-xs p-y-sm">
        <div class="text-center _3eiyvN-y_YD9WeLYpjiJJO col-auto" style="flex: 0 0 65px; width: 65px;">
            <i class="i-dashboard"></i>
        </div>
        <div class="p-r-sm col-auto col-grow">
            <span class="uO-IdjD0GZlRnQ66I7sbe">
                <!-- react-text: 40 -->Dashboard<!-- /react-text -->
            </span>
        </div>
    </div>
</a>

有没有办法使用CSS路径编辑它？或其他什么？

Answer 1

您可以使用 .innerHTML 替换 JavaScript中的文字内容。您首先需要定位元素，我在以下示例中使用 getElementsByClassName() 进行定位。请注意，这会返回 NodeList 元素集合，因此您需要访问第一个索引：

＆＃13;

var element = document.getElementsByClassName('uO-IdjD0GZlRnQ66I7sbe')[0];
element.innerHTML = 'Replaced';

＆＃13;

<span class="uO-IdjD0GZlRnQ66I7sbe">
<!-- react-text: 40 -->Dashboard<!-- /react-text -->
</span>

＆＃13;

您无法仅用CSS替换它，因为 content 属性仅适用于伪选择器 :before 和 :after 。在这方面你可以添加。

＆＃13;

.uO-IdjD0GZlRnQ66I7sbe:after {
  content: '- Added';
}

＆＃13;

<span class="uO-IdjD0GZlRnQ66I7sbe">
<!-- react-text: 40 -->Dashboard<!-- /react-text -->
</span>

＆＃13;

希望这有帮助！：）

如何使用。更改Html元素文本

1 个答案: