点击button获取text内容并改变样式的js实现


Posted in Javascript onSeptember 09, 2014

需求:点击button获得input框中选中的内容,让选中的内容变红,

实现:代码如下

<!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>

效果:

点击button获取text内容并改变样式的js实现

Javascript 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
jquery div 居中技巧应用介绍
Nov 24 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JavaScript字符串检索字符的方法
Jun 23 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
js 数组去重的四种实用方法
Sep 09 #Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 #Javascript
10分钟学会写Jquery插件实例教程
Sep 06 #Javascript
页面加载完后自动执行一个方法的js代码
Sep 06 #Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 #Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 #Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 #Javascript
You might like
PHP 数组基础知识小结
2010/08/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
php提取微信账单的有效信息
2018/10/01 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
JavaScript中字符串分割函数split用法实例
2015/04/07 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
2017/10/27 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述
2013/03/30 面试题
客服文员岗位职责
2013/11/29 职场文书
上课迟到检讨书
2014/01/19 职场文书
女娲补天教学反思
2014/02/05 职场文书
婚庆司仪主持词
2014/03/15 职场文书
社区清明节活动总结
2014/07/04 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
车贷收入证明范本
2014/09/14 职场文书
拖欠货款起诉状
2015/05/20 职场文书
员工旷工检讨书
2015/08/15 职场文书
《静夜思》教学反思
2016/02/17 职场文书