编程 Javascript

点击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实现

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 图片缩放（按比例）控制代码

May 27 Javascript

JS获取后台Cookies值的小例子

Mar 04 Javascript

浅析Js中的单引号与双引号问题

Nov 06 Javascript

Java Mybatis框架入门基础教程

Sep 21 Javascript

Javascript实现的简单右键菜单类

Sep 23 Javascript

js获取时间函数及扩展函数的方法

Oct 30 Javascript

JS实现隔行换色的表格排序

Mar 27 Javascript

详解angularjs实现echart图表效果最简洁教程

Nov 29 Javascript

深入解析ES6中的promise

Nov 08 Javascript

微信小程序冒泡事件及其阻止方法实例分析

Dec 06 Javascript

微信小程序如何修改radio和checkbox的默认样式和图标

Jul 24 Javascript

ES6 Iterator遍历器原理，应用场景及相关常用知识拓展详解

Feb 15 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 jquery 实现新闻标签分类与无刷新分页

2009/12/18 PHP

php实现的SESSION类

2014/12/02 PHP

PHP使用Redis长连接的方法详解

2018/02/12 PHP

PHP 对象继承原理与简单用法示例

2020/04/21 PHP

js获取变量

2006/08/24 Javascript

DOM2非标准但却支持很好的几个属性小结

2012/01/21 Javascript

jquery图片放大功能简单实现

2013/08/01 Javascript

用js来获取上传的文件名纯粹是为了美化而用

2013/10/23 Javascript

jquery垂直公告滚动实现代码

2013/12/08 Javascript

在firefox和Chrome下关闭浏览器窗口无效的解决方法

2014/01/16 Javascript

JS将数字转换成三位逗号分隔的样式(示例代码)

2014/02/19 Javascript

在JavaScript中使用开平方根的sqrt()方法

2015/06/15 Javascript

基于jquery实现动态竖向柱状条特效

2016/02/12 Javascript

jQuery插件制作的实例教程

2016/05/16 Javascript

对Angular.js Controller如何进行单元测试

2016/10/25 Javascript

详解JS-- 浮点数运算处理

2016/11/28 Javascript

vue3.0 CLI - 2.6 - 组件的复用入门教程

2018/09/14 Javascript

微信小程序scroll-view锚点链接滚动跳转功能

2019/12/12 Javascript

flask中使用SQLAlchemy进行辅助开发的代码

2013/02/10 Python

详细解读Python中解析XML数据的方法

2015/10/15 Python

Python的collections模块中的OrderedDict有序字典

2016/07/07 Python

详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别

2018/04/28 Python

python--shutil移动文件到另一个路径的操作

2020/07/13 Python

Python程序慢的重要原因

2020/09/04 Python

英国最红的高街时尚品牌：Topshop

2016/08/05 全球购物

英国复古和经典球衣网站：Vintage Football Shirts

2018/10/05 全球购物

高中化学教学反思

2014/01/13 职场文书

班主任工作经验材料

2014/02/02 职场文书

《长相思》听课反思

2014/04/10 职场文书

道德大讲堂实施方案

2014/05/14 职场文书

2016元旦文艺汇演主持词

2015/07/06 职场文书

2015年小学生国庆节演讲稿

2015/07/30 职场文书

入党后的感想

2015/08/10 职场文书

教师节随笔

2015/08/15 职场文书

2016年大学生暑假爱心支教活动策划书

2015/11/26 职场文书

Java基于Dijkstra算法实现校园导游程序

2022/03/17 Java/Android