点击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 相关文章推荐
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
js实现简单扫雷
Nov 27 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 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中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
2015/03/04 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
js实现数组内数据的上移和下移的实例
2017/11/14 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
python3.3实现乘法表示例
2014/02/07 Python
Python类属性与实例属性用法分析
2015/05/09 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
Python实现直播推流效果
2019/11/26 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
高中自我鉴定
2013/12/20 职场文书
大学生志愿者感言
2014/01/15 职场文书
党员干部承诺书
2014/03/25 职场文书
仓库管理计划书
2014/05/04 职场文书
市场营销计划书
2015/01/17 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Python如何加载模型并查看网络
2022/07/15 Python