点击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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
JavaScript中闭包之浅析解读(必看篇)
Aug 25 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue图片上传组件使用详解
Dec 23 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 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 Document 代码注释规范
2009/04/13 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
@ResponseBody 和 @RequestBody 注解的区别
2017/03/08 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
JS数组中对象去重操作示例
2019/06/04 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
python简单线程和协程学习心得(分享)
2017/06/14 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
分享unittest单元测试框架中几种常用的用例加载方法
2020/12/02 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
自我鉴定200字
2013/10/28 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
2015年党员自评材料
2014/12/17 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
2015年法院工作总结范文
2015/04/28 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
2015最新婚礼主持词
2015/06/30 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python