点击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 相关文章推荐
csdn 博客的css样式 v3
Feb 24 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
使用js 设置url参数
Jul 08 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
vue后台管理之动态加载路由的方法
Aug 13 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 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在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
提高php编程效率技巧
2015/08/13 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
告诉大家什么是JSON
2008/06/10 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
2019/01/20 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
python读取Android permission文件
2013/11/01 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
浅谈MySQL中的触发器
2015/05/05 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
django删除表重建的实现方法
2019/08/28 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
项目总经理岗位职责
2014/02/14 职场文书
股份合作协议书
2014/04/12 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
诚信高考倡议书
2019/06/24 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
基于PostgreSQL/openGauss 的分布式数据库解决方案
2021/12/06 PostgreSQL
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL