点击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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
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之字符串变相相减的代码
2007/03/19 PHP
php在线代理转向代码
2012/05/05 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
为你总结一些php信息函数
2015/10/21 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
JavaScript函数详解
2014/11/17 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
vue-router单页面路由
2017/06/17 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
用Python进行TCP网络编程的教程
2015/04/29 Python
Python输入二维数组方法
2018/04/13 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
EJB的几种类型
2012/08/15 面试题
小学生新年寄语
2014/04/03 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
通知函格式范文
2015/04/27 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
楚门的世界观后感
2015/06/03 职场文书
公司安全管理制度范本
2015/08/05 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js
Nginx报404错误的详细解决方法
2022/07/23 Servers