使用JavaScript动态应用CSS

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

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

---

我的方法是构造CSS，并将

样式

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

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

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

---

此代码将创建一个新的div元素，样式为

颜色：蓝色，页边空白：5px

，并使用Jquery将其附加到页面中。

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

使用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');

或

---

我认为这是一种更干净的方式，因为它将你的风格与逻辑区分开来。但是，如果css的值取决于服务器返回的内容，那么这个解决方案可能很难应用。

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

如果是这样的话，那么我不知道有什么特殊的模式不使用CSS就可以做到这一点

---

我可以告诉你，我发现最容易使用的“小部件”确实有单独的CSS文件。我发现根据我的需要修改它们是相当简单的。我认为这是因为将CSS与HTML和Javascript结合使用的结构已经是一种很好的简单模式。我不知道还有比这更好的了，尤其是考虑到人们已经非常熟悉HTML/CSS关系。

使用香草JS你可以这样做

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

circle.classList.remove('animate');

如果要将名为animate的CSS类添加到Id为circle的元素中，请执行以下操作

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

circle.classList.remove('animate');

您可以像这样删除该类

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

circle.classList.remove('animate');

---

由于您还询问了是否有更好的方法来构建组件，因此我建议您使用前端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>
    )
  }
}
`

`
从“React”导入React，{Component}
从“样式化jss”导入样式化
常量圆=样式化（'div'）({
位置：'绝对'，
宽度：50，
身高：50，
边界半径：“50%”，
背景：（道具）=>(
/*根据道具颜色生成随机颜色或颜色*/
),
变换：（道具）=>(
/*生成用于定位的随机或基于道具的变换*/
)
})
类Demo扩展了组件{
componentDidMount（）{
这个。勾选（）
}
勾号=（）=>{
requestAnimationFrame（（）=>{
this.setState（{/*一些新状态*/}，this.tick）
})
}
render（）{
返回(
{[…数组（数量）].map（（）=>）}
)
}
}
`

“我要做的是构造CSS并将样式属性设置为适当的元素”我宁愿使用DOM元素的

style

属性，而不是

setAttribute（）

，类似于：

div.style='color:blue，margin top:5px'

这些不是都一样吗？OP是关于“这是一个好的解决方案吗？有更好的方法吗？“不是如何添加内联样式。Mozilla声明”设置样式注意，不应通过将字符串直接指定给style属性（如elt.style=“color:blue；”）来设置样式，因为它被视为只读，因为style属性返回的CSSStyleDeclaration对象也是只读的。“-我会用JS创建css规则，内联样式解决方案意味着当需要更改一组元素时，必须更改所有样式属性。很酷，我喜欢这样。然而，我希望避免使用预定义的CSS，因为它要求用户了解小部件的内部结构，这会破坏封装。谢谢对于addClass和removeClass，vanila js中是否有等效的方法？好的。我在这里找到了我问题的答案。问题在于如何使用JS创建相互独立的组件。虽然您所说的HTML和CSS是标准的是绝对正确的，但这更多的是以一种增强内聚性和减少耦合的方式来包装东西。像这样打包，小部件的用户不需要知道为了构造小部件所做的样式，这还有一个额外的好处，即不需要他们知道更多的API来与它交互。我想你应该使用.attr（'style'，'…'）或.css（'width，etc'，'0px，etc'）。记住IE支持差。