使用 Javascript 进行内部 DIV CSS 样式更新

Question

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

一(内部样式表和/或 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 在 div.inner 或更高的任何位置设置--inner-bg-color的值。

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 = '';
}