点击button获取text内容并改变样式的js实现_javascript技巧

需求:点击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>

效果:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索改变样式
TEXT内容
javascript button、button 样式、bootstrap button样式、radiobutton 样式、android button 样式,以便于您获取更多的相关知识。

时间: 2024-09-09 15:38:20

点击button获取text内容并改变样式的js实现_javascript技巧的相关文章

js获取UserControl内容为拼html时提供方便_javascript技巧

今天看了老赵的文章可是怎么都调试不通过. 复制代码 代码如下: [AjaxPro.AjaxMethod] public string gethtml() { UcViewHelper<UserControl> viewManager = new UcViewHelper<UserControl>(); UserControl control = viewManager.LoadViewControl("~/uc/giftoutmodel.ascx"); stri

将文本输入框内容加入表中的js代码_javascript技巧

复制代码 代码如下: <SPAN style="FONT-SIZE: 14px"><!DOCTYPE html> <html> <head> <title>表格处理.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv=&

通过百度地图获取公交线路的站点坐标的js代码_javascript技巧

最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不支持 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取公交站点坐标</title> <style type="text/css"> html,b

一个获取第n个元素节点的js函数_javascript技巧

一个获取第n个元素节点的函数,现在只能通过html标签获取元素,功能还不完善 演示:html <ul id="list"> <li>1<button>a</button></li> <li>2<button>b</button><button>o</button></li> <p>test</p> <li>3<bu

点击隐藏页面左栏或右栏实现js代码_javascript技巧

点击隐藏页面左栏或右栏(同一TABLE中) 复制代码 代码如下: <style type="text/css"> <!-- .navPoint {COLOR: white; CURSOR: hand; FONT-FAMILY: Webdings; FONT-SIZE: 9pt} .STYLE1 {FONT-FAMILY: Webdings; FONT-SIZE: 9pt; cursor: hand;} --> </style> <script&

利用谷歌地图API获取点与点的距离的js代码_javascript技巧

复制代码 代码如下: var request; var distanceArray = []; function getdistance() { distanceArray = []; var directionsService = new google.maps.DirectionsService(); for (var a = 0; a < pointsArray.length; a++) { for (var b = 0; b < pointsArray.length; b++) { i

多浏览器兼容的获取元素和鼠标的位置的js代码_javascript技巧

复制代码 代码如下: //获取元素的位置 function getLeft(obj) { if (obj == null) return null; var mendingObj = obj; var mendingLeft = mendingObj.offsetLeft; while (mendingObj != null && mendingObj.offsetParent != null && mendingObj.offsetParent.tagName != &q

郁闷!ionic中获取ng-model绑定的值为undefined如何解决_javascript技巧

今天在ionic中使用ng-model时候,在对应的controller里面获得值为undefined.以前在使用angularjs的ng-model绑定时候就可以拿到的啊,这就尴尬了,决定一探究竟.大家先看下面的一个demo. 在学习angularjs的ng-model的数据双向绑定时候,我们通过以下的代码拿到对应的ng-model的值: demo1 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <

js如何改变文章的字体大小_javascript技巧

最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小? 小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下 效果图: 点击大.小按钮,随时切换字体大小 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>使用js如果改变一篇文章字体的大小</ti