点击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 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
Dec 26 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
详解 javascript对象创建模式
Oct 30 Javascript
Nuxt 项目性能优化调研分析
Nov 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实现验证码功能
2006/10/09 PHP
php实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
javascript动态改变img的src属性图片不显示的解决方法
2010/10/20 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
基于Jquery实现表单验证
2020/07/20 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python视频按帧截取图片工具
2019/07/23 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
地道战观后感400字
2015/06/04 职场文书
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫