使用 JavaScript 动态应用 CSS

Question

什么是动态应用样式的好方法（即样式的值是在运行时创建的）到 HTML 具有 JavaScript 的元素？

我正在寻找一种将 JavaScript 小部件（JS、CSS 和标记）打包到单个组件（基本上是一个对象）中的方法。这个想法是让组件封装样式（因此用户可以很好地 API 来修改它，而不是直接修改 CSS 并间接应用更改的更紧密耦合的方法）。问题是单个 API 调用可能意味着对多个样式元素的更改。

我这样做的方法是构造 CSS 并将 style 属性设置为适当的元素（很可能使用 ID 来避免将更改应用到标记的其他区域） .这是一个好的解决方案吗？有更好的方法吗？

Answer 1

我的方法是构造 CSS 并将样式属性设置为适当的元素。例如：

var div = document.createElement('div');
div.setAttribute("style", "color: blue, margin-top:5px");
document.body.appendChild(div);

此代码将创建一个具有 color: blue, margin-top:5px 样式的新 div 元素并将其附加到页面。

Answer 2

使用Jquery

使用 css() 函数将样式应用于您传递包含样式的对象的现有元素：

var styles = {
  backgroundColor : "#ddd",
  fontWeight: ""
};
$("#myId").css(styles);

您还可以一次应用一种样式：

$("#myId").css("border-color", "#FFFFFF");

原版 JS：

var myDiv = document.getElementById("#myId");
myDiv.setAttribute("style", "border-color:#FFFFFF;");

与Css:

您还可以使用一个单独的 css 文件，其中包含 classes 中所需的不同样式，并根据您在元素中添加或删除这些 classes 的上下文。

在你的 css 文件中你可以有 class 像

.myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

再次使用jquery，向元素添加或删除class，您可以使用

$("#myDiv").addClass('myClass');

或

$("#myDiv").removeClass('myClass');

我认为这是一种更简洁的方法，因为它将您的风格与您的逻辑分开。但是，如果您的 css 的值取决于服务器返回的内容，则此解决方案可能难以应用。

Answer 3

我可能误解了你的问题，但听起来你要求的是一种简单的架构模式。您想要让使用您的小部件的人更容易将其更改为他们的规格的东西吗？

如果是这种情况，那么我不知道有什么特殊模式可以在不使用 CSS 的情况下执行此操作。

我可以告诉你，我发现最容易使用的 "widgets" 确实有单独的 CSS 文件。我发现根据我的需要修改它们相当简单。我认为这是因为将 CSS 与 HTML 和 Javascript 一起使用的结构已经是一个不错的简单模式。我不知道还有什么更好的，特别是考虑到人们已经非常熟悉 HTML/CSS 关系。

Answer 4

使用 Vanilla JS 你可以做这样的事情。

如果你想添加一个 CSS class 命名为 animate 到一个 ID 为圆圈，这样做。

var circle = document.getElementById("circle");
circle.classList.add('animate');

您可以像这样删除 class。

circle.classList.remove('animate');

Answer 5

既然你也问过是否有更好的方法并且你构建了一个组件，我推荐的一个更好的方法是让你使用前端 javascript 框架构建这样一个组件，因为它们使动态样式非常开箱即用以Vuejs、Reactjs为例

`      
import React, {Component} from 'react'
import styled from 'styled-jss'
const Circle = styled('div')({
  position: 'absolute',
  width: 50,
  height: 50,
  borderRadius: '50%',
  background: (props) => (
    /* Generates a random or based on props color */
  ),
  transform: (props) => (
    /* Generates a random or based on props transform for  positioning */
  )
})
class Demo extends Component {
  componentDidMount() {
    this.tick()
  }
  tick = () => {
    requestAnimationFrame(() => {
      this.setState({/* Some new state */}, this.tick)
    })
  }
  render() {
    return (
      <div>
        {[...Array(amount)].map(() => <Circle />)}
      </div>
    )
  }
}
`

使用 JavaScript 动态应用 CSS

Apply CSS dynamically with JavaScript

javascript

css

encapsulation

styling

web-component