JS 中的 CSS

在 Web 开发中，JavaScript 和 CSS 是两个不可或缺的部分，而在有些情况下，我们需要使用 JavaScript 来修改 CSS 样式。这就是 JS 中的 CSS。下面将就此进行介绍。

1. 获取元素的样式

我们可以用 JavaScript 获取元素的样式，代码如下：

var element = document.getElementById('myElement');
var style = window.getComputedStyle(element);
var backgroundColor = style.getPropertyValue('background-color');

上述代码获取了 myElement 元素的背景颜色，我们可以将其用于其他逻辑中。

需要注意的是，上述代码返回的是浏览器计算后的样式，而非在 HTML 中设定的样式。

2. 修改元素的样式

我们可以使用 JavaScript 修改元素的样式，下面是一个例子：

var element = document.getElementById('myElement');
element.style.backgroundColor = 'red';

上述代码将 myElement 元素的背景颜色设置为红色。需要注意的是，修改元素的样式时，我们需要使用元素的 style 属性。

3. 动态添加样式

我们可以使用 JavaScript 动态添加样式，下面是一个例子：

var styleElement = document.createElement('style');
styleElement.innerHTML = `
  #element1 {
    color: red;
  }
  #element2 {
    color: blue;
  }
`;
document.head.appendChild(styleElement);

上述代码动态添加了一段样式，其中定义了两个元素的颜色。

需要注意的是，我们需要将样式添加到 head 元素中。

4. 可见性控制

我们可以使用 JavaScript 控制元素的可见性，下面是一个例子：

var element1 = document.getElementById('element1');
element1.style.display = 'none';

上述代码使 element1 元素不可见。同样，我们需要使用元素的 style 属性来控制其可见性。

需要注意的是，如果我们将元素不可见后，需要将其设置可见时，我们需要将 display 属性设置为 '' 而非 block 或 inline。

以上就是 JS 中的 CSS 相关内容。希望对你有所帮助。