点击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 相关文章推荐
javascript写的日历类(基于pj)
Dec 28 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
jQuery选择器基础入门教程
May 10 Javascript
Angular实现表单验证功能
Nov 13 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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/06/27 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
javascript 事件查询综合 推荐收藏
2010/03/10 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
javaScript实现一个队列的方法
2020/07/14 Javascript
python实现代理服务功能实例
2013/11/15 Python
Python functools模块学习总结
2015/05/09 Python
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
工人先锋号申报材料
2014/12/29 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python