社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 js教程 點選button取得text內容並改變樣式的js實作_javascript技巧

點選button取得text內容並改變樣式的js實作_javascript技巧

May 16, 2016 pm 04:36 PM
改變樣式

需求：點選button取得input框中選取的內容，讓選取的內容變紅，

實作：程式碼如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

<!DOCTYPE HTML>

 

<html>

 

<head>

 

<meta http-equiv="content-type" content="text/html;charset=utf-8">

 

<title>Test</title>

 

<style type="text/css">

 

div{

 

display: none;

 

}

 

</style>

 

</head>

 

<body>

 

<input type="text" id="txt" value="" />

 

<input type="button" value="获取文本框内的值" id="btn" onclick="getText();"/>

 

<div id="showText">

 

</div>

 

<script type="text/javascript">

 

function getText () {

 

var showText = document.getElementById("showText");

 

showText.style.display = "block";

 

showText.style.color = "red";

 

showText.innerHTML=document.getElementById("txt").value;

 

}

 

</script>

 

</body>

 

</html>

登入後複製

效果：

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱門文章

兩個點博物館：邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門工具標籤

代碼&IT
音訊
商業
行銷
AI檢測器
聊天機器人
設計與藝術

熱門文章

兩個點博物館：邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前 By DDD
倉庫：如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？
3 週前 By 王林
顯示更多

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7120
9
Java教學
1534
14
Laravel 教程
1254
25
PHP教程
1205
29
CakePHP 教程
1153
46
顯示更多
Related knowledge
在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

前5個日期操縱JS插件 前5個日期操縱JS插件 Feb 28, 2025 am 12:34 AM

前5個日期操縱JS插件

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

See all articles