# 🏅 DAY24 每日任務
###### tags: `JS 直播班 - 2021 秋季班`

getAttribute, setAttribute 應用
---

以下連結為 HTML 的屬性列表，可以透過 getAttribute, setAttribute 操作這些屬性。
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Attributes

### getAttribute

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

element.getAttribute("屬性名稱");

**範例**:

HTML

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

JS

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

結果:

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

HTML

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

JS

let 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

let 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

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

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


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

| Slack | CodePen |
|:------:|:----------------------------------------------------:|
| 蔡明達 | https://codepen.io/bmzpfyxe/pen/NWgKQZB?editors=0111 |
|Tim Lin|https://codepen.io/TimmyLin/pen/WNEKZVN|
| 連小艾 | https://codepen.io/bolaslien/pen/gOxjGEZ |
|CloThEs | https://codepen.io/bogwdnxx-the-sans/pen/mdMjqba|
|POPEYE | https://codepen.io/popeye_ux/pen/xxLJXoX |
| Sam | https://codepen.io/sam-hsu/pen/qBXyVry |
| Bonnie | https://codepen.io/bonnieli1414/pen/qBXyVEo?editors=1011 |
| 劉維倫 | https://codepen.io/lun0223/pen/XWaBzgz?editors=1111 |
|jojoy|https://codepen.io/jojoy/pen/RwZBjZm|
|Genos|https://codepen.io/pb220416/pen/XWaBzqE|
|Cheng Pei-hsuan|https://codepen.io/PaCheng/pen/zYdGKpO|
|Iris Huang| https://codepen.io/ythuang/pen/rNzrYZd |
| Jun Ting Lin | https://codepen.io/jake1155/pen/vYJaWVo |
| Pei Ying | https://codepen.io/Pei-Ying/pen/rNzrYRv?editors=1111 |
|米米| https://codepen.io/Jameshsu0407/pen/yLoqPQz?editors=0010 |
|Louis| https://codepen.io/Louis164156/pen/abyjVPR |
|Karen Huang| https://codepen.io/Coding_Snorlax/pen/qBXypBw |
| Elaine Liu | https://codepen.io/elaine7598/pen/Exvpbdp |
| Arista | https://codepen.io/arista-hsieh/pen/RwZBxar |
| 有廖先生(Rain)|https://codepen.io/billpop741/pen/vYJapNO |
| 傅劍軒 | https://codepen.io/seonkuraito/pen/MWvBExy?editors=0010 |
|洋蔥|https://codepen.io/oikdkmxq-the-looper/pen/qBXypPB?editors=1111|
|kk|https://codepen.io/potatokaka/pen/rNzrpLq?editors=1011|
|Gill|https://codepen.io/Gill-Chin/pen/zYdLpRQ?editors=1011|
|大衛|https://codepen.io/exnsrpjc/pen/VwzBygm?editors=1111|
| Peter Chen | https://codepen.io/yuckugjy-the-sasster/pen/BadPJer |
| ZY Hsu | https://codepen.io/zihyin/pen/mdMjpKW?editors=1111 |
|AKI|https://codepen.io/akichen27/pen/vYJadEZ|
| Bella Shya | https://codepen.io/BellaXie/pen/zYdLpMg |
| YC | https://codepen.io/YCLu/pen/YzxjeOa |
|張喆|https://codepen.io/wow767t/pen/PoKBRzr|
|Anna|https://codepen.io/kycrleao/pen/rNzrdWz?editors=1111|
|Aaron Tu|https://codepen.io/aarontu/pen/XWaBEaz|
|LTL|https://codepen.io/ltlin93/pen/LYjBdOg|
| Yunei | https://codepen.io/Yunei/pen/NWvBYzr |
|lumei|https://codepen.io/l_umei/pen/BadPrGK|
|Phil |https://codepen.io/ctkeftjp-the-animator/pen/KKvBojX |
|PeggyTsai|https://codepen.io/pei-chi-tsai/pen/qBXyoev|
|陳暐中|https://codepen.io/wei-z/pen/vYJajXN|
|Jie Du|https://codepen.io/qgqonost-the-flexboxer/pen/wvqxjde|
| Riley | https://codepen.io/jjpxbprd/pen/XWaBqGv |
|Gui|https://codepen.io/guitimliu/pen/oNeMdmx|
|AndyHuang|https://codepen.io/HsuHuaHuang/pen/VwzBxgK |
| Sylvia-H | https://codepen.io/Cosmosheart/pen/oNeMMYM?editors=0010 |
|BeanHuang|https://codepen.io/Beanhuang/pen/yLoqqxo|
|鄭安志|https://codepen.io/lwmtsgek/pen/qBXyyLL?editors=1111|
|danny123|https://codepen.io/binlandz123/pen/abyjadX |
|群嘉|https://codepen.io/efzdamnp-the-lessful/pen/QWMBVRV|
|tingyu|https://codepen.io/dgltu/pen/zYdLMya?editors=1111|
| 黃士桓 | https://codepen.io/shr-huan-huang/pen/RwZBqOb?editors=0010 |
| 柯勝華 | https://codepen.io/Chill-Nick/pen/vYJavRK?editors=0010 |
|Jocelyn|https://codepen.io/enjoyful/pen/VwzBgLp?editors=1111|
|Calon|https://codepen.io/Calon0118/pen/gOxjqyQ|
|Sandy|https://codepen.io/Sandy_L/pen/dyzjrqa?editors=1111|
|Steven Chan|https://codepen.io/Steven1220/pen/dyzjrxE |
|阿和|https://codepen.io/shnny/pen/jOLpopg?editors=1011|
|Jasper|https://codepen.io/li-jasper/pen/bGrjPqN |
| ZOE WU | https://codepen.io/Zoechiueh/pen/JjyBQOZ?editors=1111 |
| Yof | https://codepen.io/yangyof/pen/JjyBjdv?editors=1111 |
| Kelvin Hsu | https://codepen.io/kelvin001/pen/RwZYRqz?editors=1111 |
| 許閔翔 | https://codepen.io/oupbzfxq-the-scripter/pen/LYjJxxd |
| 蔣秉彣 | https://codepen.io/the-pierre/pen/ExveWOz?editors=1010 |
| Trista | https://codepen.io/trista6140/pen/WNEgEWz |
| Yashien Lin | https://codepen.io/YashienLin/pen/NWvLaXE |
|Vicky Kao|https://codepen.io/vicky03035/pen/xxLapEm|
|phi|https://codepen.io/aiya861202/pen/eYEmVjR|
|Yunyi|https://codepen.io/yunyi12374/pen/ZEJbKVW|
|zaii|https://codepen.io/ivy2846357/pen/vYJVOQe?editors=1010|
|鉦勝|https://codepen.io/atckmax823/pen/MWvPvPG?editors=1011|
|kailun|https://codepen.io/Kailun/pen/abyREMM|
|Jun Hua|https://codepen.io/ydsyvkph/pen/qBXJpyw|
| Lai | https://codepen.io/co_lai/pen/mdMGwvN |
|吉兒| https://codepen.io/Jillkate/pen/VwzERpy |
|陳sam|https://codepen.io/euldpliv/pen/mdMzgpd |
|雪莉|https://codepen.io/utshang216/pen/YzxJbPy |
|Joey|https://codepen.io/Joey-Chen/pen/RwZemJV|
| YuriT | https://codepen.io/wenfisht/pen/jOLeRVV |
| lingxuan | https://codepen.io/penglingxuan/pen/MWvzyjq?editors=1010|
| 三隻小貓 | https://codepen.io/bagelover/pen/yLoQKvL |
|Alvin|https://codepen.io/Alvin20201116/pen/ZEJmjRb?editors=1111|
| 肉魚 | https://codepen.io/zoechen13/pen/vYJQwJL |
|小K|https://codepen.io/kelen1995/pen/jOLXxME|
|乃萱|https://codepen.io/nainaikuo/pen/zYdyeMb?editors=1111|
|Chia Chi|https://codepen.io/ClaraChen/pen/ExvrKVL?editors=1111|
|Irene Wang|https://codepen.io/irene-wang-the-looper/pen/rNzPjKB|
|吐司|https://codepen.io/malolulu/pen/vYJbozz|
|Ching|https://codepen.io/Jaimedede/pen/wvqOZoE|
|debby yeh|https://codepen.io/bhliyoup/pen/RwZOReG?editors=1111
|kevinhes|https://codepen.io/kevinhes/pen/XWaQYKp?editors=1111|
|傑瑞|https://codepen.io/auatwood909815/pen/abygzqb|
| paul|https://codepen.io/printfootya/pen/gOxNwwg?editors=1111|
| 艾瑞克|https://codepen.io/ericla/pen/vYJqVGJ?editors=1111|
| Aya | https://codepen.io/NoNameNote/pen/bGrPzwm |
| Juno Li | https://codepen.io/Juno026/pen/dyzxoRW?editors=1111 |
|Zooey Cheng|https://codepen.io/noraneko0430/pen/wvqVqJg?editors=1111
|Hamaji| https://codepen.io/hamajibashi/pen/wvrwdEx |
|ShinyChen| https://codepen.io/shinychen/pen/WNZMRbB |