2017-09-25 42 views
-6

我希望我可以让自己变得尽可能清楚,当谈到CSS和HTML时我是一个真正的新手,但我正在网上尝试最佳搜索。如何更改HTML元素文本使用

我正在尝试使用Google翻译网站检查并将更改保存在我的电脑上。到目前为止,我已经能够使用称为“Stylebot”的扩展来完成它。

我走到这一步,是这样的:

._35oZDD6pOLbfsDeSjB48Da h1 { 
 
    display: none; 
 
} 
 

 
._35oZDD6pOLbfsDeSjB48Da:after { 
 
    content: "Painel de Controle"; 
 
    margin: 0; 
 
    min-width: 0; 
 
    font-size: 24px; 
 
    font-weight: 400; 
 
    color: #3c4858; 
 
}
<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>

和它的工作完美的罚款。

但我的问题是:我怎么可以编辑文本“仪表板”在这里:

<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路径的方法吗?或者是其他东西?

回答

1

可以替换.innerHTML在JavaScript文本内容。您首先需要定位元素,我在下面的示例中使用getElementsByClassName()。请注意,这会返回一个NodeList集合的元素,所以你需要访问的第一个索引:

var element = document.getElementsByClassName('uO-IdjD0GZlRnQ66I7sbe')[0]; 
 
element.innerHTML = 'Replaced';
<span class="uO-IdjD0GZlRnQ66I7sbe"> 
 
<!-- react-text: 40 -->Dashboard<!-- /react-text --> 
 
</span>

不能只用CSS代替它,作为content财产仅适用于伪选择器:before:after 。你可以在这方面加入

.uO-IdjD0GZlRnQ66I7sbe:after { 
 
    content: '- Added'; 
 
}
<span class="uO-IdjD0GZlRnQ66I7sbe"> 
 
<!-- react-text: 40 -->Dashboard<!-- /react-text --> 
 
</span>

希望这有助于! :)

相关问题