我们可以通过 JS 修改元素的大小、颜色、位置等样式。
1、常用方式
1.element.syle 行内样式操作
2.element.className类名样式操作
2、通过操作style属性
元素对象的style属性也是一个对象！
2.1、语法
元素对象.style.样式属性 = 值;
2.2、描述
1、JS里面的样式采取驼峰命名法，比如fontSize、backgroundColor；
2、JS修改style样式操作，产生的是行内样式，CSS权重比较高。
2.3、示例
<body>
<div></div>
<script>
// 1. 获取元素
var div = document.querySelector("div");
// 2. 注册事件 处理程序
div.onclick = function () {
// div.style里面的属性 采取驼峰命名法
this.style.backgroundColor = "purple";
this.style.width = "250px";
};
</script>
</body>
3、通过操作className属性
因为class是关键字，所有使用className。
3.1、语法
元素对象.className=值；
3.2、描述
1、如果样式修改较多，可以采取操作类名方式更改元素样式；
2、class因为是个保留字，因此使用className来操作元素类名属性；
3、className会直接修改元素的类名，会覆盖原先的类名。
3.3、示例
<body>
<div class="first">文本</div>
<script>
// 1. 使用 element.style 获得修改元素样式 如果样式比较少 或者 功能简单的情况下使用
var test = document.querySelector("div");
test.onclick = function () {
// this.style.backgroundColor = 'purple';
// this.style.color = '#fff';
// this.style.fontSize = '25px';
// this.style.marginTop = '100px';
// 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
// 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
// this.className = 'change';
this.className = "first change";
};
</script>
</body>
后记
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
