原生JS获取及设置CSS样式-1.行内样式

html-css014

原生JS获取及设置CSS样式-1.行内样式,第1张

面试中，应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧，让我给大家总结一下~

HTML + 行内样式

JS

嘿嘿~

方法一：

使用原生js操作dom的方法，来改变css的样式，比如

document.getElementById(id).style.property =newstyle

这里的new style 里面就可以使用js传入的变量。

此方法固然可以，但是对应改变一些复杂的css，比如动画什么的，操作起来就不怎么方便了。此时，如下的方法二就显得尤为重要了！

方法二：

利用css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使用css变量。如下图所示，我们传入year变量，然后生成了--top、--bottom等变量，然后这些变量就可以在css中使用！