点击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 图片缩放(按比例)控制代码
May 27 Javascript
JS获取后台Cookies值的小例子
Mar 04 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
深入解析ES6中的promise
Nov 08 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 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 jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php实现的SESSION类
2014/12/02 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
js获取变量
2006/08/24 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
用js来获取上传的文件名纯粹是为了美化而用
2013/10/23 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
Python程序慢的重要原因
2020/09/04 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
高中化学教学反思
2014/01/13 职场文书
班主任工作经验材料
2014/02/02 职场文书
《长相思》听课反思
2014/04/10 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
入党后的感想
2015/08/10 职场文书
教师节随笔
2015/08/15 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android