编程 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.validate.js插件使用经验记录

Jul 02 Javascript

JavaScript中实现依赖注入的思路分享

Jan 15 Javascript

深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解

Apr 03 Javascript

Bootstrap Chart组件使用教程

Apr 28 Javascript

React实现双向绑定示例代码

Sep 19 Javascript

浅谈jQuery hover(over, out)事件函数

Dec 03 Javascript

javascript读取文本节点方法小结

Dec 15 Javascript

微信小程序石头剪刀布实例代码

Jan 04 Javascript

微信小程序实现获取自己所处位置的经纬度坐标功能示例

Nov 30 Javascript

javascript使用substring实现的展开与收缩文字功能示例

Jun 17 Javascript

javascript 设计模式之组合模式原理与应用详解

Apr 08 Javascript

vue-quill-editor插入图片路径太长问题解决方法

Jan 08 Vue.js

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