使用 Javascript 更新内部 DIV CSS 样式

Question

对于以下样式，如何使用javascript更改背景颜色的值。

i) 内部样式表和/或 ii) 外部样式表

我正在使用https://github.com/dynamicdriverepo/carddeckslideshow的卡片组幻灯片放映

div.stackcontainer > div.inner{ 背景：#D7F9FF； }

Answer 1

一种方法是使用 CSS 变量（仅在最新浏览器中可用）

div.stackcontainer > div.inner{ background: var(--inner-bg-color, #D7F9FF); }

然后您可以使用 JS 将 --inner-bg-color 的值设置为 div.inner 或以上的任何位置。

document.querySelector('div.stackcontainer').style.setProperty('--inner-bg-color', 'red')

但是如果你不能改变他们的 CSS 那么你需要调整那个元素的样式：

var el = document.querySelector('div.stackcontainer > div.inner');
if (el) {
  el.style.backgroundColor = '#FF0000';
}

请注意，您现在正在搞乱决定使用什么 CSS 的特异性值。而且，如果要重置为原始值，则需要从该元素中删除 style 值。

var el = document.querySelector('div.stackcontainer > div.inner');
if (el) {
  el.style.backgroundColor = '';
}