点击button获取text内容并改变样式的js实现
更新时间：2014年09月09日 10:45:49 投稿：whsnow
这篇文章主要介绍了点击button获取text内容并改变样式的js实现,经测试非常实用，需要的朋友可以参考下
需求：点击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>
效果：
您可能感兴趣的文章:
- JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
- JavaScript中使用document.write向页面输出内容实例
- js ondocumentready onmouseover onclick onmouseout 样式
- javascript下for( in )语句 获得所有style 的【scrollbar】滚动条样式内容
- JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
- javascript dom追加内容实现示例
- JavaScript DOM操作表格及样式
- JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
- JS document内容及样式操作完整示例
相关文章
这篇文章主要介绍了javascript的return语句，return语句在js中非常的重要，不仅仅具有返回函数值的功能，还具有一些特殊的用法，感兴趣的小伙伴们可以参考一下2015-12-12
本文为大家推荐3款非常实用的在线JS代码工具，可以帮助你方便地处理JavaScript或jQuery代码2012-03-03
dva 有一个管理 effects 执行的 hook，并基于此封装了 dva-loading 插件。下面通过本文给大家分享DVA框架统一处理所有页面的loading状态，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要为大家详细介绍了微信小程序实现点击效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
程序中很多数据是动态拼接而成的json数据，最近在用json的时候老是现JSON.parse错误2010-07-07
这篇文章主要介绍了JS正则表达式之非捕获分组用法,结合实例形式详细分析了正则表达式中非捕获分组的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JS使用正则实现去掉字符串左右空格的方法,结合实例形式分析了JS针对首尾匹配及空格匹配的简单实现技巧,需要的朋友可以参考下2016-12-12
这篇文章主要为大家详细介绍了JavaScript实现联动菜单特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了js使用Promise实现简单的Ajax缓存，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
javascript每日必学之继承,介绍了有关继承的相关内容，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论