改变属性

改变属性

选择要使用的元素后，您可以更改其属性。

正如我们在以前的课程中看到的，我们可以使用 innerHTML 属性更改元素的文本内容。

同样，我们可以改变元素的属性。

例如，我们可以更改图像的 src 属性：

<img id="myimg" src="https://www.w3cschool.cn/attachments/cover/cover_php.jpg" alt="" />
<script>
var el = document.getElementById("myimg");
el.src = "https://www.w3cschool.cn/attachments/cover/cover_html.png";
</script>

我们可以更改链接的href属性：

<a href="http://www.baidu.com">百度</a>
<script>
var el = document.getElementsByTagName("a");
el[0].href = "https://www.w3cschool.cn";
el[0].innerHTML = "W3Cschool";
</script>

提示: 实际上，可以使用JavaScript更改元素的所有属性。

改变样式

HTML元素的样式也可以使用JavaScript进行更改。

可以使用元素的 style 对象来访问所有样式属性。

例如:

<div id="demo" style="width:200px">一些文本</div>
<script>
  var x = document.getElementById("demo");
  x.style.color = "6600FF";
  x.style.width = "100px"; 
</script>

上面的代码改变了div元素的文本颜色和宽度。

提示: 所有CSS属性都可以使用JavaScript进行设置和修改。请记住，您不能在属性名称中使用破折号（ - ）：这些替换为驼峰写法，其中复合词以大写字母开头 比如: background-color属性应该被写为 backgroundColor。