美女画廊案例中,下边的名称用getAtrribute属性获取
时间: 2024-04-21 14:29:21 浏览: 22
好的,以下是根据美女画廊案例中图片下边的名称用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属性,达到了将图片名称显示在下边的效果。
相关问题
用Java编写一个,随机选择一个历史美女的代码案例
import java.util.Random;
public class RandomBeauty {
public static void main(String[] args) {
String[] beauties = {"杨玉环", "西施", "貂禅", "王昭君", "貂蝉", "阿娇", "赵飞燕", "李师师", "柳如是", "韦小宝的老婆"};
Random random = new Random();
int index = random.nextInt(beauties.length);
String selectedBeauty = beauties[index];
System.out.println("随机选择的历史美女是:" + selectedBeauty);
}
}
用Java编写一个,随机选择一个历史美女的代码案例,要求美女数量50个
public class RandomBeautySelector {
public static void main(String[] args) {
String[] beauties = new String[50];
beauties[0] = "西施";
beauties[1] = "王昭君";
beauties[2] = "貂蝉";
//... 其他美女名称
beauties[49] = "杨贵妃";
int randomIndex = (int) (Math.random() * 50);
System.out.println("今天的历史美女是:" + beauties[randomIndex]);
}
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)