编程 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 相关文章推荐

基于jquery的防止大图片撑破页面的实现代码(立即缩放)

Oct 24 Javascript

使用FlexiGrid实现Extjs表格效果方法分享

Dec 16 Javascript

神奇！js+CSS+DIV实现文字颜色渐变效果

Mar 16 Javascript

js实现楼层效果的简单实例

Jul 15 Javascript

jQuery延迟执行的实现方法

Dec 21 Javascript

Angular.JS中的this指向详解

May 17 Javascript

微信小程序实现轮播图效果

Sep 07 Javascript

详解VUE 数组更新

Dec 16 Javascript

微信小程序合法域名配置方法

May 06 Javascript

解决Angularjs异步操作后台请求用$q.all排列先后顺序问题

Nov 29 Javascript

Vue.js实现立体计算器

Feb 22 Javascript

Vue实现返回顶部按钮实例代码

Oct 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