---
tags: JS 直播班 - 2023 秋季班
---
# 🏅 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 / 答案 |
|:----------:|:-------------------------------------------------------:|
|xiaokui_71292|[CodePen](https://codepen.io/pen?template=bGzqOZM)|
|cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/wvNJRPr)|
|pinyi_9|[CodePen](https://codepen.io/Wpypy/pen/rNPyPaB?editors=1111)|
|銀光菇|[CodePen](https://codepen.io/genesynthesis/pen/eYxvxJO)|
| Eden| [Codepen](https://codepen.io/iseden/pen/bGzqzBm)|
| yuan! | [Codepen](https://codepen.io/townyuan/pen/xxMqMqE)|
| runweiting | [Codepen](https://codepen.io/weiting14/pen/rNPyPYx)|
| lychee_kk | [Codepen](https://codepen.io/kakakala/pen/dyavaeZ)|
| JasonFu | [Codepen](https://codepen.io/jie-Fu/pen/LYqWqWW)|
| kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/MWLpLXw)|
| Helen | [Codepen](https://codepen.io/milkteamonster/pen/eYxvxod)|
| Andy | [Codepen](https://codepen.io/andy31342/pen/JjxWxBJ)|
| 精靈 | [Codepen](https://codepen.io/justafairy/pen/qBgrvOo)|
|CPing|[Codepen](https://codepen.io/CPing/pen/abXJMdV)|
|Winnie|[Codepen](https://codepen.io/codepen-io-winnie/pen/KKJWEpV)|
| yuan2781 | [Codepen](https://codepen.io/ismebir/pen/dyavryK)|
| Ching | [Codepen](https://codepen.io/tzuchingg/pen/NWopJpG?editors=1011)|
| 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/LYqWayB)|
| Alyce | [Codepen](https://codepen.io/alycehwy/pen/oNmZVQV)|
| ⭐️小正 | [Codepen](https://codepen.io/colorgolden/pen/rNPyRQd)|
| Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/MWLpRWQ)|
| Yijing | [Codepen](https://codepen.io/Yi-Jing-71080635/pen/oNmZObK)|
| stone4584 | [Codepen](https://codepen.io/Royen0506/pen/eYxvoBL)|
|yuling|[codepen](https://codepen.io/igzdflpu/pen/VwgpNKY)|
|Moreene|[CodePen](https://codepen.io/Moreene/pen/LYqWvzY)|
| claire | [Codepen](https://codepen.io/yi-wen-chen/pen/jOdBRzx)|
| shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/KKJWLaY)|
| Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/eYxvaQZ)|
| kawa | [Codepen](https://codepen.io/z83xji6/pen/JjxWQEL?editors=1111)|
| Uli | [Codepen](https://codepen.io/uli1313/pen/KKJWjzz)|
| xin | [Codepen](https://codepen.io/Estherrrrrr999/pen/OJdpeeN)|
| 維哲 | [Codepen](https://codepen.io/kwz1202/pen/qBgreEw)|
| 奔跑吧(GTR150)| [Codepen](https://codepen.io/Wer-Qwe/pen/KKJWOGx?editors=1111)|
| Tina02 | [CodePen](https://codepen.io/chjitlox-the-bashful/pen/JjxWbGb) |
| tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/KKJmPqL?editors=1111)|
| Ataraxia | [Codepen](https://codepen.io/ataraxia8888/pen/VwgjXGp)|
| SHUO | [Codepen](https://codepen.io/xrzarxkl-the-reactor/pen/ZEwLdQy?editors=1111)|
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/zYewxgO?editors=1111)|
| yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/vYbmOXJ)|
| gebymen | [Codepen](https://codepen.io/gebyman/pen/ZEwKGbd?editors=1011)|
| hsu0921 | [Codepen](https://codepen.io/HSUANIN0327/pen/OJdmVpE)|
| MY | [Codepen](https://codepen.io/ahmomoz/pen/jOdmPvg)|
| ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/rNPmOXv?editors=1111)|
| 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/QWYvNbZ)|
| cosmos | [Codepen](https://codepen.io/violet7755/pen/yLZbaxx)|
| ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ZEweNXY)|
| JUNEW | [Codepen](https://codepen.io/June-W/pen/PoVmpRp)|
| RX00| [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/YzBVQKL?editors=1111)|
| Peng| [Codepen](https://codepen.io/H-Peng/pen/Exrmvxe)|
| Ccccc| [Codepen](https://codepen.io/CyreneTsai/pen/OJdmjBg?editors=1112)|
| 郭芙蘭#6374| [Codepen](https://codepen.io/flora_Kuo/pen/OJdmOLd?editors=1111)|
| 風羽 | [Codepen](https://codepen.io/Joy-Huang/pen/vYbmpQK)|
| sponge | [Codepen](https://codepen.io/biunpujm-the-flexboxer/pen/KKJmQVr?editors=1111)|
| dora | [Codepen](https://codepen.io/dorayu/pen/RwvpvMy)|
| 荷菓かのり| [Codepen](https://codepen.io/oogxwkvw-the-builder/pen/PoVmaYK)|
|celinelinnn|[Codepen](https://codepen.io/celinephoebe/pen/QWYvzmO)|
|jiayu|[Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/eYxWwvB)|
|小廷|[Codepen](https://codepen.io/uyxkiake-the-selector/pen/rNPmXed?editors=1111)|
| Jerry | [Codepen](https://codepen.io/ildkosxk-the-encoder/pen/MWLobaz)
| 保羅 | [Codepen](https://codepen.io/paul-1997/pen/bGzqZzw?editors=0010)|
| 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/MWLobZg)|
| Oria | [Codepen](https://codepen.io/kajing/pen/PoVjmPj?editors=1111)|
|白夜|[CodePen](https://codepen.io/Wei903/pen/MWLovEr?editors=1011)|
|davidtt|[CodePen](https://codepen.io/David-Tsai/pen/abXwKyb)|
|damon0323|[CodePen](https://codepen.io/swk9eny2/pen/bGzWGPB?editors=1111)|
|_shun0130|[CodePen](https://codepen.io/koba60052ww/pen/OJdgGGb)|
| santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/KKJvpQG)|
| phyllis | [CodePen](https://codepen.io/gmoxhrmc-the-styleful/pen/ZEwJqGR)|
| Joy-chiang | [CodePen](https://codepen.io/fwysphbw-the-vuer/pen/wvNrBNG)|
| Mattie |[CodePen](https://codepen.io/mattielin/pen/NWowqdd)|
| shcopy |[CodePen](https://codepen.io/shcopy/pen/dyaVebd)|
|yaoling.liang|[CodePen](https://codepen.io/Yao-Ling-L-/pen/bGzYKwp)|
|Iris|[CodePen](https://codepen.io/iris831206/pen/jOdZLdg)|
|xuan|[CodePen](https://codepen.io/xuan0915/pen/YzBeaEX?editors=1010)|
|ChrisSQR|[CodePen](https://codepen.io/ChrisSQR/pen/PoVQeVy)|
|Vivian2857|[CodePen](https://codepen.io/vivian_lin/pen/LYqQqbQ)|
|jimmy.0706|[CodePen](https://codepen.io/WeiJun-Mao/pen/RwvQvgq)|
|Daylily|[CodePen](https://codepen.io/daylily/pen/RwvQdVP)|
|Lainie|[CodePen](https://codepen.io/Lainie88/pen/WNPzJEK?editors=1111)|
|Rochel|[Codepen](https://codepen.io/rochelwang1205/pen/abXKoVm)|
|Hank._.z|[Codepen](https://codepen.io/linoiaby-the-sans/pen/ZEwRGrG)|
|nini1202desu|[Codepen](https://codepen.io/tvxq5206/pen/OJdwWqL?editors=1111)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/VwgBVgE)|
|bf_tsai|[Codepen](https://codepen.io/BF-Tsai/pen/mdvGyGJ?editors=0010)|
|NathanJames|[Codepen](https://codepen.io/ufo060204/pen/oNmavyj)|
|skypassion5000|[Codepen](https://codepen.io/skypassion5000/pen/ZEwqdVY?editors=1111)|
| 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/mdvQzpy)|
|阿榮|[Codepen](https://codepen.io/codeitaday/pen/abXPLRR)|
|nikkita_3544|[Codepen](https://codepen.io/vanessa7259/pen/rNPoovL?editors=1111)|