javascript - 通过 JS 编辑 CSS

Question

我想用来自 HTML 的输入通过 JS 在 CSS 中编辑我的根，但可以肯定的是，它不起作用。

我通过链接 href 和 script src 将它们链接到 HTML

var VarRTGCLC = document.getElementById('RTGCLC').value
document.documentElement.style.setProperty("--oneStroke", VarRTGCLC + "px")

//OR

// let root = document.documentElement;
// root.style.setProperty(VarRTGCLC + "px")

:root {
  --oneStroke: 2px;
}

.RTGCLC {
  stroke-width: var(--oneStroke) !important;
}

<tr>
  <td>kresba plicní</td>
  <td><input id="RTGCLC" name="RTGChestLungCong" value="10" /></td>
</tr>

标签： javascripthtmlcss

Answer 1

function ChangeSize(){
var VarRTGCLC = document.getElementById('RTGCLC').value
document.documentElement.style.setProperty("--oneStroke", VarRTGCLC + "px")
}


//OR

// let root = document.documentElement;
// root.style.setProperty(VarRTGCLC + "px")

:root {
  --oneStroke: 2px;
}

.RTGCLC {
  stroke-width: var(--oneStroke) !important;
  border:1px solid #bbb
}

<tr>
  <td>kresba plicní</td>
  <td><input id="RTGCLC" name="RTGChestLungCong" value="10" onChange="ChangeSize()" /></td>
</tr>

试试这个，我认为它适合你