首頁猿問如何使用按鈕在javascript...

如何使用按鈕在javascript中添加類

JavaScript

慕的地8271018 2021-11-04 17:48:36

我想嘗試使用 javascript 添加類，我知道在 stackoverflow 中有很多關于這個的主題，但其中一些對我來說太復雜了，我無法理解，假設我有這個簡單的代碼這是我已經讀過的一些主題：addclass-to-getelementsbyclassname-arrayadd-css-class-using-document-getelementsbyclassnameadd-class-using-getelementsbyclassname-javascript這是我的 html<p> test 1 </p> <h2 class="test-2"> test 2 </h2> <h3 class="test-3"> test 2 </h3> <button onClick="addClass"> click me </button>這是我的CSS：p{ color: red;}.test-2{ font-size: 2em; color: blue;}.test-3{ font-size: 5em; font-weight: bold;}這是我的js：function addClass () { var x = document.getElementsByClassName("test-3")[0]; return x[0].className += ' test-2';}我哪里做錯了？我很困惑，因為我是 javascript 新手

查看完整描述

2 回答

慕神8447489

TA貢獻1780條經驗獲得超1個贊

getElementsByClassName返回元素的實時集合。抓取第一個索引[0]是正確的，但你不需要第二次這樣做：

x.className += ' test-2'

您可能會發現使用querySelector和classList更容易一些，因為它們的界面更新并且通常更適合現代 JS 開發。

querySelector允許您使用 CSS 選擇器來選擇元素，并返回使用該選擇器找到的元素的第一個實例。（它的姊妹方法querySelectorAll返回一個（非活動的）節點列表，您可以對其進行迭代）。

classList 允許您簡單地從元素添加和刪除類，而無需將類字符串相互連接。

這是一個演示。

const button = document.querySelector('button');

button.addEventListener('click', addClass, false);

function addClass() {

var x = document.querySelector('.test-3');

x.classList.add('test-2');

}

p { color: red; }

.test-2 { font-size: 2em; color: blue; }

.test-3 { font-size: 5em; font-weight: bold; }

<button>click me</button>

反對回復 2021-11-04

拉風的咖菲貓

TA貢獻1995條經驗獲得超2個贊

添加類名時刪除額外的 [0] 并且不要從函數中返回它

function addClass () {

var x = document.getElementsByClassName("test-3")[0];

x.className += ' test-2';

console.log(x.getAttribute("class"))

}

color: red;

}

.test-2{

font-size: 2em;

color: blue;

}

.test-3{

font-size: 5em;

font-weight: bold;

}

<p>

test 1

</p>

test 2

</h2>

test 2

</h3>

click me

</button>

反對回復 2021-11-04

2 回答
0 關注
185 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用按鈕在javascript中添加類

如何使用按鈕在javascript中添加類

2 回答

添加回答