在flexbox中使用javascript更改CSS样式

Question

我熟悉使用javascript更改的CSS样式，但是当样式是flexbox样式时，我有一个问题。

我有一个使用CSS的带有id="foo“样式的div

#foo{
display:flex;
justify-content:center;
}

我正在尝试将justify-content:center更改为justify-content:flex-start using

document.getElementById('foo').style.justifyContent="flex-start";

但这不会将更改应用到div

有什么想法吗？

Answer 1

您必须使用驼峰式大小写或括号表示法。你不能在代码中使用这样的连字符。

document.getElementById('foo').style.justifyContent = 'flex-start'

或者：

document.getElementById('foo').style["justify-content"] = 'flex-start'

Answer 2

CSS属性名称中的连字符在JavaScript中被视为减号，现在您可以尝试对不存在的变量(即justify minus content)进行减法。

在JavaScript中使用时，包含破折号的CSS属性名称通常会转换为驼峰式大小写，因此justify-content将变为justifyContent。

您可能还会发现，提前设置另一个CSS类，然后使用JavaScript切换正在与classList API一起使用的类，而不是编写内联样式，这样更容易。