How to Change HTML-Element Text mit

Question

Ich hoffe, ich kann mich so klar wie möglich machen, ich bin ein echter Neuling, wenn es um CSS und HTML geht, aber ich versuche meine beste Suche im Internet.

Ich versuche eine Website mit Google Inspect zu übersetzen und die Änderungen auf meinem PC zu speichern. Bisher konnte ich es mit einer Erweiterung namens "Stylebot" machen.

Was ich bisher habe, ist dies:

._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>

Und es funktionierte völlig in Ordnung.

Aber meine Frage ist: Wie kann ich den Text „Armaturenbrett“ hier bearbeiten:

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

Gibt es eine Möglichkeit, diese zu bearbeiten, CSS Pfad? Oder etwas anderes?

Answer 1

können Sie ersetzen Textinhalt in JavaScript mit .innerHTML. Sie müssen zuerst das Element anzielen, was ich im folgenden Beispiel mit getElementsByClassName() mache. Beachten Sie, dass dies eine NodeList Sammlung von Elementen zurückgibt, so dass Sie den ersten Index zugreifen müssen:

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

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

Sie kann es nicht ersetzen mit nur CSS, als content Eigenschaft funktioniert nur mit Pseudo-Selektoren :before und :after . Sie könnten dazu in dieser Hinsicht hinzufügen.

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

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

hoffe, das hilft! :)