點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn)
更新時間:2014年09月09日 10:45:49 投稿:whsnow
這篇文章主要介紹了點擊button獲取text內(nèi)容并改變樣式的js實現(xiàn),經(jīng)測試非常實用,需要的朋友可以參考下
需求:點擊button獲得input框中選中的內(nèi)容,讓選中的內(nèi)容變紅,
實現(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)容實例
- js ondocumentready onmouseover onclick onmouseout 樣式
- javascript下for( in )語句 獲得所有style 的【scrollbar】滾動條樣式內(nèi)容
- JavaScript基于Dom操作實現(xiàn)查找、修改HTML元素的內(nèi)容及屬性的方法
- javascript dom追加內(nèi)容實現(xiàn)示例
- JavaScript DOM操作表格及樣式
- JavaScript 高級篇之DOM文檔,簡單封裝及調(diào)用、動態(tài)添加、刪除樣式(六)
- JS document內(nèi)容及樣式操作完整示例
相關文章
學習javascript,實現(xiàn)插入排序?qū)崿F(xiàn)代碼
首先新建一個空列表,用于保存已排序的有序數(shù)列(我們稱之為"有序列表")。從原數(shù)列中取出一個數(shù),將其插入"有序列表"中,使其仍舊保持有序狀態(tài)。2011-07-07使用validate.js實現(xiàn)表單數(shù)據(jù)提交前的驗證方法
這篇文章主要介紹了使用validate.js實現(xiàn)表單數(shù)據(jù)提交前的驗證方法,文中給大家提供了完整代碼,需要的朋友可以參考下2018-09-09JavaScript實現(xiàn)復制文本到剪切板功能的方法小結
這篇文章給大家介紹了三種JavaScript實現(xiàn)復制文本到剪切板的方法,Clipboard API,document.execCommand以及useClipboard這三個接口,文章通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2023-11-11JavaScript實現(xiàn)控制并發(fā)請求數(shù)量的方法詳解
這篇文章主要為大家詳細介紹了JavaScript如何實現(xiàn)控制并發(fā)請求數(shù)量,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02