用js获取元素属性的代码

获取HTML元素属性是前端开发中常见的操作。使用JavaScript可以轻松地获取元素的属性，我们可以通过以下方式来实现。

1. 通过JavaScipt获取元素属性

我们可以通过JavaScript中的document对象来访问HTML元素，使用属性访问器（.）或者获取属性方法（getAttribute）来获取元素的属性。

1.1 使用属性访问器

使用属性访问器可以直接获取元素属性，其语法如下：

document.getElementById('elementId').attributeName

其中，getElementById方法用于获取页面上具有指定id的元素，attributeName是需要获取的元素属性名。

举个例子，假设我们有如下HTML元素：

<div id="myDiv" class="myClass"></div>

我们可以通过如下代码来获取该元素的class属性值：

var divEle = document.getElementById('myDiv');
var className = divEle.class; // 获取元素的class属性值

1.2 使用getAttribute方法

getAttribute方法可以直接获取元素属性的值，其语法如下：

document.getElementById('elementId').getAttribute('attributeName')

其中，getElementById方法用于获取页面上具有指定id的元素，getAttribute方法用于获取元素指定的属性值，attributeName是需要获取的元素属性名。

举个例子，假设我们有如下HTML元素：

<div id="myDiv" class="myClass"></div>

我们可以通过如下代码来获取该元素的class属性值：

var divEle = document.getElementById('myDiv');
var className = divEle.getAttribute('class'); // 获取元素的class属性值

2. 两个示例说明

2.1 示例1

我们可以通过如下代码来获取某个HTML元素的id属性值:

var ele = document.getElementsByTagName('input')[0];
var idValue = ele.getAttribute('id');
console.log(idValue);

其中，getElementsByTagName方法用于获取页面上指定标签名称的元素集合，这里我们获取了第一个input元素，然后获取了其id属性值，最后打印在控制台上。

2.2 示例2

我们可以通过如下代码来获取某个HTML元素的样式属性值:

var ele = document.getElementsByTagName('div')[0];
var bgc = ele.style.backgroundColor;
console.log(bgc);

其中，getElementsByTagName方法用于获取页面上指定标签名称的元素集合，这里我们获取了第一个div元素，然后获取了其background-color样式属性值，最后打印在控制台上。

以上就是用JavaScript获取元素属性的完整攻略，其中包含了两个示例讲解。使用JavaScript获取元素属性，需要注意需要先获取到对应的元素，然后再根据需要获取的属性名来提取元素的属性值。