# 🏅 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

<div id="targetId">目標 Id</div>

JS

const element = document.querySelector('#targetId');
console.log(element.getAttribute('id'));

結果：

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

HTML

<div id="targetId">目標 Id</div>

JS

const element = document.querySelector('#targetId');
console.log(element.getAttribute('name')); // 由於 name 屬性不存在，因此會回傳 null

結果：

### setAttribute
#### 1. 可以使用 setAttribute 替指定元素設定屬性值，若該屬性存在則會替換值，語法如下：

element.setAttribute("屬性名稱", "屬性值");

範例：
HTML

<div id="targetId">目標 Id</div>

CSS

.colorRed{
  color: #FF0000;
}

JS

const element = document.querySelector('#targetId');
element.setAttribute('class', 'colorRed');

結果（以下為網頁渲染畫面）：

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

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

HTML

<a href="#" id="targetId" name="google">google 連結</a>

CSS

.colorRed{
   color: #FF0000;
}

JS

const element = document.querySelector('#targetId');
if(/* 請填入程式碼 */){
  /* 請填入程式碼 */
}

## 回報流程

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

<!--
解答：

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]() |
-->