点击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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
Node.js中npm常用命令大全
Jun 09 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
整理关于Bootstrap导航的慕课笔记
Mar 29 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 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 array_search() 函数使用
2010/04/13 PHP
php传值方式和ajax的验证功能
2017/03/27 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Django教程笔记之中间件middleware详解
2018/08/01 Python
基于python实现百度翻译功能
2019/05/09 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
基于Python 函数和方法的区别说明
2021/03/24 Python
机械系毕业生求职信
2014/05/28 职场文书
葬礼主持词
2015/07/02 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers