---
tags: JS 直播班 - 2022 秋季班
---
# 🏅 Day 24 - 取得、設定元素屬性

### getAttribute, setAttribute 應用

以下連結為 HTML 的屬性列表，可以透過 [getAttribute](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/getAttribute), [setAttribute](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/setAttribute) 操作元素屬性。
https://developer.mozilla.org/zh-TW/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 / 答案 |
|:----------:|:-------------------------------------------------------:|
|嗶嗶羊#8042| [CodePen](https://codepen.io/mazizlte-the-typescripter/pen/KKezorG?editors=1111) |
| Vera#5592 | [CodePen](https://codepen.io/skvera/pen/vYrGybY) |
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/qBKZxgg)|
|suihsilan#9485|[codepen](https://codepen.io/suihsilan/pen/QWxNQRg?editors=1010)|
|無名#6427|[codepen](https://codepen.io/Nomoney/pen/OJENvJR)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/KKezQLX)|
|yumy#1940|[CodePen](https://codepen.io/yumy_yamg/pen/bGKpvGq)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/jOKbxEO) |
|hsiung阿熊#4079|[Codepen](https://codepen.io/hsiungchi/pen/jOKqZgG)
|albee#9121|[Codepen](https://codepen.io/albee-chang/pen/VwdaXvw?editors=1111)|
|jimmyFang#9575|[Codepen](https://codepen.io/pohxiqqo/pen/LYrNdVK?editors=0010)|
|JackC#0411|[codepen](https://codepen.io/key0329/pen/YzvqayP)|
|Clara#1275|[codepen](https://codepen.io/bsupixqu/pen/bGKpveR)|
|masterYan#2480|[codepen](https://codepen.io/htzwgoqt-the-looper/pen/OJENvRp?editors=1111)|
|Kimi #9564|[Codepen](https://codepen.io/kimihu91/pen/WNyQaeo)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/OJENQRL)|
|Hazel.#6020|[Codepen](https://codepen.io/Hazelhsieh/pen/vYrGRLN?editors=1010)|
|Data#9297|[Codepen](https://codepen.io/kirakira72/pen/jOKqzBz)|
|Ron Liang#7277|[Codepen](https://codepen.io/ron-go/pen/GRGZxOr)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/zYaqWPQ)|
|楓之聲#6945|[Codepen](https://codepen.io/sshane258/pen/VwdaXXa)|
| LHchien33#6232 |[Codepen](https://codepen.io/lin_chien/pen/eYKZMGb?editors=1010)|
| Cookie SSS#6991 |[Codepen](https://codepen.io/sqhjikpa-the-selector/pen/abKNYqe)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/QWxNmrx)|
| 我是泇吟#5189 | [CodePen](https://codepen.io/kljuqbxs/pen/GRGZxyW) |
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/OJENvQj?editors=1111)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/wvXGmEy)|
|amy芳#1385|[Codepen](https://codepen.io/amy-chieng/pen/vYrGRQg)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/mdKPxQm)|
|azami#5986|[Codepen](https://codepen.io/azami/pen/VwdaXNP)|
|banazita#5143|[CodePen](https://codepen.io/banazita/pen/KKezoZB)|
|Arista#5802|[CodePen](https://codepen.io/arista-hsieh/pen/gOKreVo)|
|yoshidc#0455|[CodePen](https://codepen.io/yoshiyyc/pen/qBKZYWN)|
|Ruby Chen#7452|[Codepen](https://codepen.io/ruby92429/pen/YzvqaBN?editors=1111)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/rNKevaN)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/WNywJea?editors=1011)|
|yawun#0042|[CodePen](https://codepen.io/monicalin/pen/zYaqjBv)|
|予予#9627|[CodePen](https://codepen.io/kiqzcraa/pen/QWxNrpP?editors=1111)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/VwdaxeW)|
|christina#6185|[Codepen]()|
|肉桂卷#0625|[CodePen](https://codepen.io/ginnlee/pen/GRGZdQB?editors=1011)|
|christina#6185|[Codepen](https://codepen.io/chrisc0210/pen/vYrGjRR)|
|Winnie#1306|[Codepen](https://codepen.io/WinnieWuWinnie/pen/NWzNMYm?editors=1010)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/ExRKavZ?editors=1010)|
|shio#1414|[Codepen](https://codepen.io/shioyen/pen/JjZXvey)|
|JustinLiu#9699|[CodePen](https://codepen.io/justin0227/pen/dyKMeam)|
|萱仔#0781|[CodePen](https://codepen.io/ting-hsuan/pen/eYKZKBR?editors=0010)|
|Loran#1105|[CodePen](https://codepen.io/loranlin/pen/oNyxyBP?editors=1011)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/NWzNzjx)|
|RJRS#9430|[CodePen](https://codepen.io/RJRS/pen/XWYdYje)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/ZERWRaJ)
|Hilda#7085|[CodePen](https://codepen.io/vwquikad-the-vuer/pen/qBKZKpJ)
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/QWxNxPv)
|母湯#7211|[CodePen](https://codepen.io/tommyshih77/pen/zYaqLYm?editors=1111)
|竹輪#3335|[CodePen](https://codepen.io/chikuwa0120/pen/oNyxMXK)|
|0xWilliam #8796 |[CodePen](https://codepen.io/0xWilliam0322/pen/MWXyBrz?editors=1010)
|jackson204#6363|[CodePen](https://codepen.io/jackson204/pen/YzvqjvG)|
|beta lin#1445|[codePen](https://codepen.io/linbeta/pen/QWxNBZB)|
|Peng#9811|[CodePen](https://codepen.io/peng-027/pen/jOKqpRe)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/YzvqOqx)|
|RyanTsai#8906|[CodePen](https://codepen.io/linlaose/pen/oNyxPww)
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/YzvqOyQ?editors=1111)|
|WEI_RIO#9342|[CodePen](https://codepen.io/wei_wu/pen/LYrNJWW?editors=1111)|
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/gOKrdyZ)|
|魚子醬#5220|[CodePen](https://codepen.io/haihsuan/pen/JjZKWwN)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/abKZpBX) |
|軟綿綿 (๑•ᴗ•๑) ♡#3627|[CodePen](https://codepen.io/Connie-Chien/pen/bGKeqEK?editors=0010)|
| m_m#5493 | [CodePen](https://codepen.io/minnn7716/pen/poKbwOZ) |
|王懷英#7271|[CodePen](https://codepen.io/huaiying/pen/KKeMRNb)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/LYrZebR)|
|yoyo#1003|[CodePen](https://codepen.io/crpbugqy-the-typescripter/pen/WNywPRQ)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/LYrZoLd)|
|Cynthia1111#1822|[Codepen](https://codepen.io/Cynthia1111/pen/dyKXErw?editors=1010)|
|Chung#5951|[Codepen](https://codepen.io/yuju16/pen/yLEJmRm)|
|蓁心#6229|[Codepen](https://codepen.io/tlorfrnl-the-typescripter/pen/NWzNJEY)|
|Jill#5577|[CodePen](https://codepen.io/Jillkate/pen/RwJGNqx)|
|SASIMI#5099|[codepen](https://codepen.io/sashimi1327/pen/vYrNVMK)|
|PoWei#8484|[codepen](https://codepen.io/harrison-wei-lai/pen/dyKpNNL)|
|Ayre#0016|[Codepen](https://codepen.io/yichunlin09/pen/abKmpaM?editors=1010)|
|安o#2448|[Codepen](https://codepen.io/JzhenAn/pen/RwJGKda?editors=1111)|
|Cream#3449|[Codepen](https://codepen.io/frxdwbbi-the-sasster/pen/VwdKpZe?editors=1111)|
|kevin#6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/xxzEqrG?editors=1111)|
|bingsu#2362|[Codepen](https://codepen.io/pmyfr/pen/KKegyJQ)|
|Silvialu#4521|[Codepen](https://codepen.io/Silvia091640/pen/MWXjrPM)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/YzvppPx)|
|Azi Hsieh#2861|[CodePen](https://codepen.io/AziHsieh/pen/YzvWNrX)|
|IreneY#0086|[codepen](https://codepen.io/HalfPlannedJourney/pen/eYKBedR)|
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/ZERBvym)|
|charlottelee849#0366|[codepen](https://codepen.io/charlotte-lee/pen/KKeNQoP?editors=1010)|
|L0F0#8733|[codepen](https://codepen.io/l0f0/pen/zYaojoe)|
|Tami#6742|[CodePen](https://codepen.io/wqsdqbjn-the-vuer/pen/jOKVKPd)|
|三隻小貓#1905|[CodePen](https://codepen.io/bagelover/pen/eYKBKXd)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/BaVQOwd)|
|Lou#0085|[Codepen](https://codepen.io/Lusie_H/pen/NWzbmMy?editors=0010)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/QWxdLZe?editors=1111)|
|芮綺#5224|[CodePen](https://codepen.io/zhan70/pen/JjZbOra)|
|Wei#2330|[codepen](https://codepen.io/ixfjxrbo-the-typescripter/pen/LYrxWEa)|
|Velma#1693|[codepen](https://codepen.io/Ze1225/pen/YzvNZMG)|
|Yishan#4902|[codepen](https://codepen.io/gdjrehhw-the-animator/pen/dyKNRZg)|
|健育#5748|[codepen](https://codepen.io/c1317156/pen/PoaWQGE?editors=1111)|
|Paul#7426|[CodePen](https://codepen.io/paul-1997/pen/OJEpRQR?editors=1111)|
|ling chang#1024|[CodePen](https://codepen.io/ling-chang/pen/PoapEpP)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/mdKWQwG?editors=0010)|
|FiReBrO#0557|[Codepen](https://codepen.io/firebro42/pen/OJEpdZQ)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/abKwzXa?editors=1010)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/bGKRqEX?editors=1111)|
|君Jyun#0147|[codepen](https://codepen.io/Okaybeok/pen/ZERJYOW?editors=1111)|
|艾芮絲#6060|[codepen](https://codepen.io/wangyingju/pen/OJExvzj)|
|meimei#9524|[codepen](https://codepen.io/isnrudav/pen/BaVwJMe?editors=1111)|
|Baozi#2042|[codepen](https://codepen.io/lillianyu/pen/YzvYJKE)|
|pss940909#8650|[codepen](https://codepen.io/pss940909/pen/vYrdNKM?editors=1111)|
|教練#6451|[codepen](https://codepen.io/monkeybear721/pen/dyKdzPy?editors=1111)|
|Chloe#5422|[Codepen](https://codepen.io/Ironchloe/pen/gOKvGNE)|
|阿風#6890|[Codepen](https://codepen.io/Afonguwu/pen/jOKZaWq)|
|入門小菜G#0191|[Codepen](https://codepen.io/DennisLiu123123/pen/oNyqQxE)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/poKKmGQ)|
|Judy #7874|[CodePen](https://codepen.io/hsiaohan/pen/KKeqOpK?editors=1011)|
|Ringo #7583|[CodePen](https://codepen.io/ringolai1988/pen/xxzmqmE)|
|Mia小福#4473|[CodePen](https://codepen.io/a0950271/pen/MWXLEVa)|
|samger#0808|[CodePen](https://codepen.io/lee-wei-hong/pen/NWzJdBN)|
|J_u_d_y#5993|[Codepen](https://codepen.io/J_u_d_y/pen/zYLJGVo?editors=1111)|