点击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 window对象属性整理
Oct 24 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
Cookie 小记
Apr 01 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 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 批量删除 sql语句
2009/06/05 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php实现可运算的验证码
2015/11/10 PHP
php实现微信发红包
2015/12/05 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP语言对接抖音快手小红书视频/图片去水印API接口源码
2020/08/11 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
js获取url传值的方法
2015/12/18 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
node文字生成图片的示例代码
2017/10/26 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python获取远程文件大小的函数代码分享
2014/05/13 Python
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python基于phantomjs实现导入图片
2016/05/13 Python
python学生管理系统开发
2019/01/30 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
如何实现jdbc性能优化
2012/07/30 面试题
金智子午JAVA面试题
2015/09/04 面试题
党员群众路线学习心得体会
2014/11/04 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
MySQL 语句执行顺序举例解析
2022/06/05 MySQL