点击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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
JS对HTML标签select的获取、添加、删除操作
Oct 17 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
在node中如何使用 ES6
Apr 22 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
Feb 08 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php多文件上传实现代码
2014/02/20 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
[原创]php求圆周率的简单实现方法
2016/05/30 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
2009/02/18 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
jquery实现省市select下拉框的替换(示例代码)
2014/02/22 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
js实现带有动画的返回顶部
2020/08/09 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
安全生产标语
2014/06/06 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
明星邀请函
2015/02/02 职场文书
2015最新婚礼司仪主持词
2015/06/30 职场文书