⭐ 改变元素节点的css样式
oBox.style.backgroundColor = 'red';
oBox.style.backgroundImage = 'url(images/1.png)';
oBox.style.fontSize = '32px';
需要注意的是，属性的名字要用”驼峰“的形式去写（因为js中短横线就是减号，所以不能用短横线写）。
所以，想要改变一个css的属性值，就用上面的语法形式写就可以了。
为什么要使用js来改变css的样式呢？这个在后面写到事件监听的时候会有很大的用处，比如监听到鼠标点击按钮的事件，就可以利用js改变按钮的样式，呈现出很好的动画效果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box'); //获取元素节点
box.style.backgroundColor = 'green'; //改变背景颜色
box.style.borderRadius = '50%'; //改变圆角
</script>
</body>
</html>
设置的样式是通过”行内“的形式设置的：
⭐ 改变元素节点的HTML属性
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="/images/1.jpg" alt="" id="pic">
<a href="https://www.baidu.com/" id="baidu">去百度</a>
<script>
//获取节点
var oPic = document.getElementById('pic');
var oLink = document.getElementById('baidu');
//更改HTML属性
oPic.src = '/images/2.jpg';
oLink.href = 'https://news.baidu.com/';
oLink.innerText = '去百度新闻';
</script>
</body>
</html>
示例代码：
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.setAttribute('data-n', 10); //设置一个不符合W3C规范的属性
var n = box.getAttribute('data-n'); //获取一个不符合W3C规范的属性值
alert(n);
</script>
</body>