點擊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)容及樣式操作完整示例
相關(guān)文章
這篇文章主要介紹了javascript的return語句，return語句在js中非常的重要，不僅僅具有返回函數(shù)值的功能，還具有一些特殊的用法，感興趣的小伙伴們可以參考一下2015-12-12
本文為大家推薦3款非常實用的在線JS代碼工具，可以幫助你方便地處理JavaScript或jQuery代碼2012-03-03
DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個管理 effects 執(zhí)行的 hook，并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)，感興趣的朋友一起看看吧2017-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
程序中很多數(shù)據(jù)是動態(tài)拼接而成的json數(shù)據(jù)，最近在用json的時候老是現(xiàn)JSON.parse錯誤2010-07-07
這篇文章主要介紹了JS正則表達(dá)式之非捕獲分組用法,結(jié)合實例形式詳細(xì)分析了正則表達(dá)式中非捕獲分組的概念、功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JS使用正則實現(xiàn)去掉字符串左右空格的方法,結(jié)合實例形式分析了JS針對首尾匹配及空格匹配的簡單實現(xiàn)技巧,需要的朋友可以參考下2016-12-12
JavaScript實現(xiàn)聯(lián)動菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)聯(lián)動菜單特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了js使用Promise實現(xiàn)簡單的Ajax緩存，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
javascript每日必學(xué)之繼承,介紹了有關(guān)繼承的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-02-02