JS element.style.property改变元素样式
JS改变元素样式
要通过JavaScript来动态地改变DOM中HTML元素的CSS样式，可以通过element.style.property来完成。其语法如下：
element.style.property = newValue
语法结构：
| 语法结构 | 描述 |
|---|---|
| element | 通过JavaScript获取到的DOM元素 |
| style | 为element元素的style属性 |
| property | sytle中的属性值，比如width、height之类的 |
| newValue | 属性值 |
element.style.property修改元素样式实例代码，及在线编辑器
下方实例可以通过点击按钮改变div元素的背景颜色：
<div id='p1'></div><br>
<button onclick='changeColor()'>改变背景颜色</button>
<style>
#p1{width:100%;height:50px;background-color:orange;}
</style>
<script>
function changeColor(){
var element = document.getElementById('p1');
element.style.backgroundColor = 'skyblue';
}
</script>