HTML id属性

id属性

HTML中元素的id属性有什么作用呢?在HTML中,可以创建ID锚,也可以将label元素指向于某个input,等等,在CSS中,可以通过id选择器来匹配查找元素,并设置层叠样式等等,在JavaScript中,可以通过id来获取元素,并对元素进行JS的编程,等等。


id语法

<element id='value'>

提示:HTML文档中各个元素的id属性值都是唯一的。


id属性实例代码,及在线编辑器

下方的实例,将通过JavaScript代码获取id值为e1的元素,然后修改元素的样式,本来的样式通过id选择器设置的是字体颜色为blue,然后修改成skyblue,实例代码如下:

<p id='e1'>该段落中的字体颜色本来为blue,点击下方按钮,将被修改为skyblue。</p>
<button onclick='setColor()'>改变字体颜色</button>

<style>
  #e1{font-size:1.5em;color:blue;}
</style>

<script>
	function setColor(){
      var ele = document.getElementById('e1');
      ele.style.color = 'skyblue'
    }
</script>

全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.