點(diǎn)擊button獲取text內(nèi)容并改變樣式的js實(shí)現(xiàn)
需求:點(diǎn)擊button獲得input框中選中的內(nèi)容,讓選中的內(nèi)容變紅,
實(shí)現(xiàn):代碼如下
<!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="獲取文本框內(nèi)的值" 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>
效果:
- JavaScript 輸出顯示內(nèi)容(document.write、alert、innerHTML、console.log)
- JavaScript中使用document.write向頁面輸出內(nèi)容實(shí)例
- js ondocumentready onmouseover onclick onmouseout 樣式
- javascript下for( in )語句 獲得所有style 的【scrollbar】滾動條樣式內(nèi)容
- JavaScript基于Dom操作實(shí)現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法
- javascript dom追加內(nèi)容實(shí)現(xiàn)示例
- JavaScript DOM操作表格及樣式
- JavaScript 高級篇之DOM文檔,簡單封裝及調(diào)用、動態(tài)添加、刪除樣式(六)
- JS document內(nèi)容及樣式操作完整示例
相關(guān)文章
學(xué)習(xí)javascript,實(shí)現(xiàn)插入排序?qū)崿F(xiàn)代碼
首先新建一個空列表,用于保存已排序的有序數(shù)列(我們稱之為"有序列表")。從原數(shù)列中取出一個數(shù),將其插入"有序列表"中,使其仍舊保持有序狀態(tài)。2011-07-07JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航
這篇文章主要介紹了JavaScript導(dǎo)航腳本判斷當(dāng)前導(dǎo)航的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07EditPlus注冊碼生成器(js代碼實(shí)現(xiàn))
在線的EditPlus注冊碼生成器,看了看還真是,在這里exe的注冊機(jī)病毒太多,純js的在線注冊機(jī)可就放心了,感興趣的各位可以參考下哈,希望可以幫助到你2013-03-03使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法
這篇文章主要介紹了使用validate.js實(shí)現(xiàn)表單數(shù)據(jù)提交前的驗(yàn)證方法,文中給大家提供了完整代碼,需要的朋友可以參考下2018-09-09JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析
在本篇文章里小編給大家分享了關(guān)于JavaScript禁用右鍵單擊優(yōu)缺點(diǎn)分析,有需要的朋友們學(xué)習(xí)下。2019-01-01JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)簡單的tab切換選項(xiàng)卡效果,涉及javascript結(jié)合鼠標(biāo)事件對頁面元素屬性動態(tài)操作的相關(guān)技巧,需要的朋友可以參考下2016-09-09JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板功能的方法小結(jié)
這篇文章給大家介紹了三種JavaScript實(shí)現(xiàn)復(fù)制文本到剪切板的方法,Clipboard API,document.execCommand以及useClipboard這三個接口,文章通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11JavaScript實(shí)現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript如何實(shí)現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02