---
# System prepended metadata

title: "\U0001F3C5 Day 24 - 取得、設定元素屬性"
tags: [JS 直播班 - 2024 秋季班]

---

# 🏅 Day 24 - 取得、設定元素屬性

### getAttribute, setAttribute 應用 

可以透過 [getAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute), [setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) 操作 [HTML 元素屬性](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)。


### getAttribute

#### 1. 使用 getAttribute 可以回傳一個元素上的指定屬性值，語法如下：

```
element.getAttribute("屬性名稱");
```
**範例**：

HTML
```htmlembedded=
<div id="targetId">目標 Id</div>
```
JS
```javascript=
const element = document.querySelector('#targetId');
console.log(element.getAttribute('id'));
```
結果：
![](https://i.imgur.com/DvAMFov.png)

#### 2. 使用 getAttribute 取用屬性時，如果指定的屬性不存在，則會回傳 `null` 或 `""`。

HTML
```htmlembedded=
<div id="targetId">目標 Id</div>
```
JS
```javascript=
const element = document.querySelector('#targetId');
console.log(element.getAttribute('name')); // 由於 name 屬性不存在，因此會回傳 null
```
結果：
![](https://i.imgur.com/0bfxvG4.png)

### setAttribute
#### 1. 可以使用 setAttribute 替指定元素設定屬性值，若該屬性存在則會替換值，語法如下：
```
element.setAttribute("屬性名稱", "屬性值");
```
範例：
HTML
```htmlembedded=
<div id="targetId">目標 Id</div>
```
CSS
```css=
.colorRed{
  color: #FF0000;
}
```
JS
```javascript=
const element = document.querySelector('#targetId');
element.setAttribute('class', 'colorRed');
```
結果（以下為網頁渲染畫面）：
![](https://i.imgur.com/F53xtGb.png)

問題
---
請根據 HTML, CSS 以及題目條件撰寫 JS 程式碼

>如果 element 的 name 屬性為 "google"，請執行以下要求：
>
>要求一: 將 element 的 href 屬性更改為 "https://www.google.com/"
>要求二: 替 element 新增一個 target 屬性，並設定為 "_blank"
>要求三: 替 element 新增一個 class 屬性，並設定為 "colorRed"

HTML
```htmlembedded=
<a href="#" id="targetId" name="google">google 連結</a>
```
CSS
```css=
.colorRed{
   color: #FF0000;
}
```
JS
```javascript=
const element = document.querySelector('#targetId');
if(/* 請填入程式碼 */){
  /* 請填入程式碼 */
}
```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)
<!-- 
解答：  

const element = document.querySelector('#targetId');
if(element.getAttribute('name') === 'google'){
  element.setAttribute('href', 'https://www.google.com/');
  element.setAttribute('target', '_blank');
  element.setAttribute('class','colorRed');
} -->





回報區
---
| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 01 | voke | [CodePen](https://codepen.io/FiSi-the-lessful/pen/KKOqNXe) | 
| 02 | 毛巾 | [CodePen](https://codepen.io/bqdcjboa-the-solid/pen/RwXyZWb) | 
| 03 | 泊岸 | [CodePen](https://codepen.io/qoq77416416/pen/wvVjqoo) | 
| 04 |yuling| [CodePen](https://codepen.io/yu-ling-peng/pen/LYwmjLK) | 
|   05  | Celine      | [CodePen](https://codepen.io/szuning/pen/oNKdeNV?editors=1010) | 
|   06  | jimmy.0706      | [CodePen](https://codepen.io/JimmyMao/pen/Jjgvyqj) | 
|   06  | 嚼勁先生      | [CodePen](https://codepen.io/James520284/pen/MWNGvRz) | 
| 07 | Kaya | [CodePen](https://codepen.io/kayaribi/pen/KKORXqJ) | 
|  08   |   Ariel    | [CodePen](https://codepen.io/ariel0510/pen/gOVzGQK?editors=1111) |
| 09 | Ruby | [CodePen](https://codepen.io/xivgaijl-the-selector/pen/JjgvrgJ) |
| 10 | ab567ab5 | [CodePen](https://codepen.io/WanTzu-Chiang/pen/ZEgoaLp?editors=1011) |
|  11   |   610    | [CodePen](https://codepen.io/YI-LING-LIU/pen/eYqreyW) | 
|  12   | kun._c8_shake_it |[CodePen]() | 
| 13 | yuyuhunter_0509 | [CodePen](https://codepen.io/KRcube/pen/BaXxJoK?editors=0011) |
| 14 | GTR150 | [CodePen](https://codepen.io/Wer-Qwe/pen/VwoxyQY?editors=1111) | 
|15|Tatsu| [CodePen](https://codepen.io/chindesu0207/pen/BaXxrOa) |
| 16 | yuyeh_1212 | [CodePen](https://codepen.io/yuyeh1212/pen/qBeYoKK) |
| 17 | .tsz_ying | [CodePen](https://codepen.io/bekgnohe-the-selector/pen/MWNGQXg?editors=1111) 
| 18 |brucelee0629| [CodePen](https://codepen.io/xxhdklwi-the-decoder/pen/LYwmrGG?editors=1011) | 
| 19 | Mos | [CodePen](https://codepen.io/mos25399/pen/MWNGBeK) | 
|  20   |   JIA    | [CodePen](https://codepen.io/nzaicwlw-the-styleful/pen/wvVjQJL?editors=1010) | 
|  21   |   陳小廷    | [CodePen](https://codepen.io/ting1124/pen/gOVzZeM) | 
|  22   |   Sonia    | [CodePen](https://codepen.io/YUJOU/pen/dyxerNm) | 
|  23   |   david1819    | [CodePen](https://codepen.io/David-Lin-the-vuer/pen/RwXymvx) | 
|24|睿睿|[CodePen](https://codepen.io/uwmrsusb-the-solid/pen/RwXyzRB)|
| 25 | Dolce_墨 | [CodePen](https://codepen.io/DolceTseng1026/pen/bGXMPoX) | 
|26|mercury2508.| [CodePen](https://codepen.io/Mercury2508/pen/zYgjgvj) |
|  27  |    chris   | [CodePen](https://codepen.io/chris-chen-the-selector/pen/xxvjvmN) |
|28|Hedwig| [CodePen](https://codepen.io/adirehfz-the-encoder/pen/KKOeKXd) | 
|29|Mike| [CodePen](https://codepen.io/mike2049/pen/vYorGOK?editors=1111) | 
|30|邵|[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/abeKGaP?editors=1111)|
|31|是在哈囉|[CodePen](https://codepen.io/miyxdhem-the-solid/pen/zYgaVXz)|
|32|Jainee|[CodePen](https://codepen.io/Jainee0110/pen/KKOBqBK)|
|33|蘑菇星星|[CodePen](https://codepen.io/brrrieon-the-vuer/pen/yLmqXVm?editors=1011)|
|34|Rogan|[CodePen](https://codepen.io/RoganHsu/pen/qBeyoyX)|
| 35 | Ed Huang | [CodePen](https://codepen.io/yide1986/pen/YzmjRgL) | 
|  36   |  Emma  | [CodePen](https://codepen.io/Emma0919/pen/NWQBvvx) | 
|  37   |  charlottelee  | [CodePen](https://codepen.io/char849/pen/qBeyemY) | 
|  38   |  野鴿  | [CodePen](https://codepen.io/HoshinoSyouta/pen/LYwJYNR?editors=1111) |
|  39   |  kaka_945  | [CodePen](https://codepen.io/kay945/pen/gOVdbGN) | 
|  40   |  JRz  | [CodePen](https://codepen.io/JRZHENG/pen/ZEgMBOx?editors=1111) | 
|  41   |  ycl325.etheddie  | [CodePen](https://codepen.io/wdvikfuz-the-selector/pen/RwXYZWY) | 
|  42   |  Lotte  | [CodePen](https://codepen.io/hmkdoxuj-the-decoder/pen/WNVgPQo?editors=0111) | 
|  43   |  Su  | [CodePen](https://codepen.io/wuasu/pen/KKOGZOg) |
|  44   |  Joannehu  | [CodePen](https://codepen.io/nelbabkv-the-flexboxer/pen/mdNzxNX) |
|  45  |  Jack  | [CodePen](https://codepen.io/kxbhixte-the-sasster/pen/ZEgmGzL) |
|46|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/BaXGjxb?editors=1111)|
|   47  |  alec1203     | [CodePen](https://codepen.io/soloayaya/pen/xxvQXrj?editors=1112) | 
|   48  |  joylu0902     | [CodePen](https://codepen.io/joylu0902/pen/poMVGEQ) | 
|   49  |  Seris     | [CodePen](https://codepen.io/Dale-Chien/pen/MWNzrZK?editors=1111) | 
|   50  |jerry_66983      | [CodePen](https://codepen.io/Barry-C/pen/zYgMjOY) | 
| 51 | Glen_69515 | [CodePen](https://codepen.io/glenyaochih/pen/bGXOrox?editors=1111) | 
| 52 | KOMATSU PEI | [CodePen](https://codepen.io/Komatsu2021/pen/MWNxabm?editors=1111) | 
|53|Amy(咂摳)| [CodePen](https://codepen.io/nnxucgmc-the-builder/pen/QWePZrY?editors=0011) | 
| 54 | Nocab | [CodePen](https://codepen.io/PeihanWang/pen/YzmbPLP?editors=1111) | 
| 55 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/WbeejXp?editors=1111) |
| 56 | haojing | [Codepen](https://codepen.io/hjxu/pen/ByByLJO) |
| 57 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/emOLQXe?editors=1111)

<!-- 可複製下方格式
|     |       | [CodePen]() | 
-->