如何修改外部JavaScript脚本igv.js的CSS样式？

嘿，我来给你唠唠怎么调整igv.js生成的组件样式！其实有几个实用的方法，你可以根据自己的需求挑着用：

• 用自定义CSS覆盖默认样式
  igv.js渲染可视化组件时，会给生成的DOM元素加上专属类名，比如.igv-browser、.igv-track-header、.igv-canvas-container这些。你只要找到目标元素的类名，在自己的HTML里写对应的CSS规则就行。如果默认样式优先级太高压不住，偶尔用用!important强制覆盖也没问题（不过能不用就不用，尽量靠更具体的选择器来提优先级）。

举个例子，想把轨道标题改成红色、字号调大：

<style>
.igv-track-header {
  color: #ff0000 !important;
  font-size: 14px !important;
}
</style>

把这段代码放在你的HTML里，确保它在igv.js加载之后，或者选择器足够具体，就能轻松覆盖默认样式啦。

• JavaScript动态修改DOM样式
  要是你需要根据用户操作或者其他条件动态调样式，那可以等igv浏览器初始化完成后，手动定位到目标DOM元素改样式。重点是得等igv把所有元素都渲染出来再操作，所以最好用createBrowser的回调函数：

import igv from "https://cdn.jsdelivr.net/npm/igv@3.0.0/dist/igv.esm.min.js"
const div = document.getElementById("igv_div")
const config = {
  // 这里填你的igv配置，比如基因组、轨道信息等
}

// 等浏览器初始化完成后再修改样式
igv.createBrowser(div, config).then(browser => {
  // 选中所有轨道标题元素
  const trackHeaders = document.querySelectorAll('.igv-track-header');
  trackHeaders.forEach(header => {
    header.style.color = '#ff0000';
    header.style.fontSize = '14px';
  });
});

这样就能在igv准备妥当之后，精准调整指定元素的样式了。

• 利用igv.js原生配置项
  其实igv.js本身就自带不少样式配置项，这才是最省心的方式——毕竟是官方支持的，完全不用担心样式冲突的问题。比如配置轨道的时候，直接给track加style属性就行：

const config = {
  genome: "hg19",
  tracks: [
    {
      name: "我的自定义轨道",
      url: "path/to/your/data/file",
      style: {
        color: "#1a75ff",
        height: 60,
        visibilityWindow: 100000
      }
    }
  ]
}

不同轨道类型能配置的样式细节不一样，但常用的颜色、高度、可见范围这些需求，基本都能通过内置配置搞定。

备注：内容来源于stack exchange，提问作者gernophil