点击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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
May 14 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
react antd表格中渲染一张或多张图片的实例
Oct 28 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
AM/FM收音机的安装与调试
2021/03/02 无线电
生成php程序的php代码
2008/04/07 PHP
初学CAKEPHP 基础教程
2009/11/02 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP中phar包的使用教程
2017/06/14 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
MUI  Scroll插件的使用详解
2017/04/13 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python操作gmail实例
2015/01/14 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
Python引用模块和查找模块路径
2016/03/17 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
大气污染防治方案
2014/05/19 职场文书
语文教育专业求职信
2014/06/28 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
小数乘法教学反思
2016/02/22 职场文书