用JavaScript动态应用CSS

Question

什么是应用动态样式（即样式的值在运行时创建）为HTML与JavaScript元素的好办法？

我在寻找一种方式，一种单组分（基本上，一个对象）来包装一个JavaScript小部件（JS，CSS和标记）。这个想法是为组件封装造型（以便用户有一个很好的API来修改它，而不是直接修改的CSS和具有间接地施加变化的更紧密耦合方式）。问题是，一个API调用可能意味着更改多个造型元素。

我会做它的方式是构建CSS和thestyle atrribute设置为正确的元素（最有可能使用的ID，以避免将更改应用到标记的其他地区）。这是一个很好的解决方案？有没有更好的办法做到这一点？

Answer 1

使用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文件，并根据上下文添加或删除这些类的元素。

在你的CSS文件，你可以像类

.myClass {
    background-color: red;
}

.myOtherClass {
    background-color: blue;
}

同样使用jQuery，添加或删除一个类的元素，你可以使用

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

要么

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

我认为这是一个更清洁的方式，因为它从你的逻辑分离你的风格。但是，如果你的CSS的值取决于从什么是由服务器返回，这种解决方案可能难以适用。

Answer 2

我会做它的方式是构建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 3

使用香草JS，你可以做这样的事情。

如果你想添加动画命名与编号圆圈元素的CSS类，像这样做。

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

您可以删除类这样的。

circle.classList.remove('animate');

Answer 4

我可能误解了你的问题，但它听起来像你问一个简单的架构模式。你想要的东西，使其更容易谁在使用你的小工具，它改变其规格有人？

如果是这样的话，那么我不知道任何特殊的模式来做到这一点，而不使用CSS。

我可以告诉你，我发现最容易使用的“小工具”做有独立的CSS文件。我发现它相当简单修改它们对我的需要。我想，这是因为使用CSS与HTML和Javascript的结构已经是一个不错的，简单的模式。我不知道还有什么更好的，尤其是考虑到人们已经非常熟悉HTML / CSS的关系。

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>
    )
  }
}
`