getAtrribute
时间: 2024-01-04 10:04:08 浏览: 21
getAttribute 是 JavaScript 中用来获取 HTML 元素的属性值的方法。它可以在指定的 HTML 元素上获取指定属性的值。其中,getAttribute 方法接受一个参数,即需要获取的属性名。例如,以下代码获取了一个图片元素的 src 属性值:
```
const img = document.querySelector('img');
const src = img.getAttribute('src');
console.log(src);
```
如果图片元素中没有 src 属性,或者该属性为空,则 getAttribute 方法会返回 null。注意,getAttribute 方法只能获取 HTML 属性的值,不能获取 CSS 样式的值。如果需要获取 CSS 样式的值,需要使用 getComputedStyle 方法。
相关问题
美女画廊案例中,下边的名称用getAtrribute属性获取
好的,以下是根据美女画廊案例中图片下边的名称用getAtrribute属性获取的代码:
HTML 代码:
```html
<div class="img-container">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg" alt="Nature" data-name="Nature">
<div class="img-name"></div>
</div>
```
JavaScript 代码:
```javascript
const img = document.querySelector('.img-container img');
const imgName = img.getAttribute('data-name');
const imgNameContainer = document.querySelector('.img-name');
imgNameContainer.textContent = imgName;
```
这段代码首先通过querySelector方法选中了包含图片的div元素,然后用getAttribute方法获取了图片的data-name属性值,将其赋值给了图片下边的名称容器的textContent属性,达到了将图片名称显示在下边的效果。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![run](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)