Day16:操作元素屬性與內容

17th鐵人賽

因為有拖延症所以叫鴿子

2025-09-30 21:59:20

28 瀏覽

分享至

1.操作文字內容

操作文字內容有兩個方法
1.element.textContent設定純文字內容
2.element.innerHTML設定HTML元素

範例：

首先先在HTML檔內寫入一個元素：

<h1 id="title">原本的標題</h1>

然後在JS裡面進行修改：

const title = document.querySelector('#title');

console.log(title.textContent); //原本的標題

title.textContent = '新標題'; //改變純文字
//title.innerHTML = '<span style="color:red">紅色標題</span>'; //可以插入HTML

2.操作屬性

元素的屬性像是src、href、id、class都能用 JS 修改。

方法有兩種，直接存取或是用setAttribute/getAttribute
html部分的程式碼就先不寫啦，直接展示js寫法的部分

1.直接存取：

const link = document.querySelector('a');
link.href = 'https://ithome.com.tw';
link.textContent = 'iThome';

2.用setAttribute或getAttribute：

const link = document.querySelector('a');
link.href = 'https://ithome.com.tw';
link.setAttribute('target', '_blank');
console.log(link.getAttribute('href')); //https://ithome.com.tw

3.操作class

很多CSS效果的效果是綁在class上的，所以我們可以藉由操作class來改變元素的樣式，用這個方式來實現互動的部分
js也有特地為操作class的部分做特定的寫法

element.classList.add('classname') → 加class
element.classList.remove('classname') → 移除class
element.classList.toggle('classname') → 開/關切換
element.classList.contains('classname') → 檢查有沒有這個class

HTML：

<p id="msg">Hello</p>

JS：　

const msg = document.querySelector('#msg');
msg.classList.add('highlight');
msg.classList.toggle('hidden'); // 有就移除，沒有就加上

4.操作樣式

其實js當然也可以直接修改元素的css樣式，不過由於樣式通常都綁在class上，所以不太會用到
範例：

msg.style.color = 'red';
msg.style.fontSize = '24px';

練習

1.建立一個<img>，用JS改變它的src
2.建立一個<p>，點擊按鈕後切換highlight的class
3.嘗試用innerHTML插入一段小HTML

<!DOCTYPE html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>第16天練習 - 操作元素屬性與內容</title>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>第16天練習</h1>

  <!--練習1：修改圖片-->
  <p>練習1</p>
  <img id="myImage" src="https://via.placeholder.com/100" alt="預設圖片">
  <button id="changeImgBtn">換圖片</button>

  <!--練習2：切換文字class-->
  <p>練習2</p>
  <p id="myText">這是一段文字</p>
  <button id="toggleClassBtn">切換 Highlight</button>

  <!--練習3：用innerHTML插入HTML-->
  <p>練習3</p>
  <div id="container">這裡會插入新的內容</div>
  <button id="insertBtn">插入內容</button>

  <script>
    //練習1：修改圖片src
    const img = document.querySelector('#myImage');
    const changeImgBtn = document.querySelector('#changeImgBtn');
    changeImgBtn.addEventListener('click', () => {
      img.src = 'https://via.placeholder.com/150/0000FF/FFFFFF?text=New+Image';
    });

    //練習2：切換文字class
    const text = document.querySelector('#myText');
    const toggleClassBtn = document.querySelector('#toggleClassBtn');
    toggleClassBtn.addEventListener('click', () => {
      text.classList.toggle('highlight');
    });

    //練習3：用innerHTML插入HTML元素
    const container = document.querySelector('#container');
    const insertBtn = document.querySelector('#insertBtn');
    insertBtn.addEventListener('click', () => {
      container.innerHTML = '<p style="color:blue;">這是 <strong>插入的段落</strong>！</p>';
    });
  </script>
</body>
</html>

練習結束之後，整理一下今天的內容:
1.element.textContent設定純文字內容
2.element.innerHTML設定HTML元素
3.我們可以用setAttribute和getAttribute來設定html的內容
4.用classList搭配add() remove() toggle() contains()來控制元素的樣式