Início / coding / Perguntas / 79583154
Accepted
gernophil
Asked: 2025-04-20 16:02:34 +0800 CST

Alterar o estilo CSS do script JavaScript externo?

  • 772

Olá, estou tentando alterar alguns estilos CSS de um script JavaScript externo (igv.js). Estou executando esse script incorporado em um arquivo HTML, conforme sugerido aqui .

<div id="igv_div">
<script type="module">
    import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
    const div = document.getElementById("igv_div")
    const config = {
            genome: "hg19"
    }
    const browser = await igv.createBrowser(div, config) 
</script>
</div>

Consegui mudar algumas cores globalmente de uma só vez usando algo assim:

<style>
#igv_div {filter: invert(88%);}
</style>

No entanto, nada do que tento altera elementos individuais. Quando simplesmente tento definir o estilo CSS de um elemento no cabeçalho HTML, parece que isso é completamente ignorado.

<style>
.igv-track-label {color: red;}
</style>

No entanto, posso manipulá-lo usando o seletor diretamente no navegador, então acho que o estilo está codificado em algum lugar do próprio script e substitui meu CSS modificado. Existe alguma maneira de substituir o estilo do script sem alterá-lo, ao executá-lo a partir de um arquivo HTML?

javascript

2 respostas

  1. Best Answer

    Como o Shadow DOM isola os elementos abaixo dele, você não pode defini-los diretamente. Você pode alterar o estilo desejado injetando-o diretamente no DOM após carregar o Shadow DOM.

    Observação: os estilos que você deseja substituir não ficarão visíveis até que o DOM esteja totalmente carregado.

    <div id="igv_div">
<script type="module">
    import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
    const div = document.getElementById("igv_div")
    const config = {
            genome: "hg19"
    }
    const browser = await igv.createBrowser(div, config) 

    var style = document.createElement( 'style' )
    style.innerHTML = '.igv-track-label { color: red; }'
    div.shadowRoot.appendChild( style )
</script>

</div>

    • 3

  2. O igv.jsé renderizado via shadow DOM e seu estilo não faz parte do CSS padrão do documento. Você pode criar um CSSSTyleSheetobjeto via JS e aplicá-lo à shadow root :

    <div id="igv_div"></div>

<script type="module">
  import igv from "https://cdn.jsdelivr.net/npm/[email protected]/dist/igv.esm.min.js"
  const div = document.getElementById("igv_div")
  const config = {
    genome: "hg19"
  }
  const browser = await igv.createBrowser(div, config)

  // create style sheet
  const sheet = new CSSStyleSheet()

  // add rules to the stylesheet
  await sheet.replace(`
    .igv-track-label {
      color: red;
    }
  `)
  
  // apply stylesheet to shadow root
  div.shadowRoot.adoptedStyleSheets.push(sheet)
</script>

    • 2

relate perguntas