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

效果：

赞 (0)

相关推荐

  • 使用javascript插入样式

    一.用javascript插入<style>样式 有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中. 但有些兼容性问题我们需要解决.首先在符合w3c标准的浏览器中我们只需要把要插入的css代码作为一个文本节点插入到style元素中即可,而在IE中则需要利用style元素的styleSheet.cssText来解决. 还需要注意的就是在有些版本IE中一个页面上sty

  • JavaScript插入动态样式实现代码

    与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式:动态样式是在页面加载完成后动态添加到页面中. 我们以下面这个典型的<link>元素为例: <link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素: 复制代码 代码如下: var link = document.createElement("link&qu

  • javascript插入样式实现代码

    javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候.最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入. 一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用<style>标签插入页面样式(这里说的不是style属性). 一.页面中引入外部样式: 在<head>

  • js实现class样式的修改、添加及删除的方法

    本文实例讲述了js实现class样式的修改.添加及删除的方法.分享给大家供大家参考.具体分析如下: 比较常见的js前端功能,通过修改标签的className实现相应的功能. 具体代码如下: 复制代码 代码如下: <table> <tbody> <tr> <td>js实现class的样式的修改.添加.删除</td> <td>  <a e_value="g_sn" ename="商品编码" c

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

  • jsp页面中插入css样式的三种方法总结

    1. 外部样式 当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用<link>标签链接到样式表.<link>标签在(文档的)头部: <head><link rel="stylesheet"  type="text/css"  href="path/myCss.css"/></head> 2.内部样式 当

  • jquery mobile页面跳转后样式丢失js失效的解决方法

    用ajax跳转的时候,从a.html跳转到b.html后,b.html的css以及js都失效了. 方法: 将当前页面b.html需要用到的css以及js放在<page>div内. 原理: 由于jqm的ajax跳转的时候,只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了.

  • ExtJS自定义主题（theme）样式详解

    本文基于Ext JS 4.2.1版本UI组件基础学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件.ExtJs4的组件体系中有将近100种组件,而这些组件又可以大致分为四大类,即容器类组件.工具栏及菜单栏组件.表单及元素组件.其他组件.theme主题ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题. Sass

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

    点击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">

  • C#获取鼠标在listview右键点击单元格的内容方法

    当我们右键点击listview控件时,可以得到选择的项的各个文本内容. 现在我们要求只获取右键点击时的单元格的文本内容. 方法如下: 1.定义全局的鼠标状态 Point m_MBRpt;//鼠标右键点击时Point 2.处理鼠标按下时在listView的消息 private void listView1_MouseDown(object sender, MouseEventArgs e) { // if (e.Button==MouseButtons.Right) { // 得到屏幕鼠标的坐标,

  • 微信小程序mpvue点击按钮获取button值的方法

    在小程序里面是没有dom元素的,这个我们只要会小程序的应该都知道,但是在平时开发中我们偶尔会遇到需要点击某个元素获取它的值的情况,在这里给大家列举了两种情况解决方法 方式一:数据绑定 这种情况的话,对应的场景是只有一个按钮或元素调用这个方法的情况下的 在你的.vue文件中的data数据里面添加变量 data() { return { msg:'苏喂苏喂苏喂' }; getData(){ console.log( this.msg ) } 按钮上 <button @click="getDat

  • unity 如何获取button文本的内容

    unity 如何获取button文本的内容

    如下就可以获取button中的文本内容 using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; using System; public class ButtonContent : MonoBehaviour{ public Button btn; void Start(){ btn = GameObject.Find("填写button名").getComponent<Button&g

  • JQuery 获取多个select标签option的text内容(实例)

    根据option的id属性,修改text值 $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); $("#sel_div

  • MSSQL数据库获取TEXT字段的内容长度

    SQL Server数据库如何获取TEXT字段的内容长度的方法,是通过DATALENGTH函数来实现的,接下来我们就通过DATALENGTH函数的语法及使用实例来了解一下这部分内容. DATALENGTH用来返回任何表达式所占用的字节数. 语法:DATALENGTH ( expression ) 参数:expression,任何类型的表达式. 返回类型:int 注释:DATALENGTH 对 varchar.varbinary.text.image.nvarchar 和 ntext 数据类型特别

  • JS实现点击按钮获取页面高度的方法

    JS实现点击按钮获取页面高度的方法

    本文实例讲述了JS实现点击按钮获取页面高度的方法.分享给大家供大家参考,具体如下: 这是一个JavaScript特效代码,点击获取网页高度,在ie6下实现position-fixed的效果,另外针对遮罩的问题(大概是做lightBox吧),个人觉得纯css法(不包括其显示/隐藏)将更适合. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-btn-web-height-codes/ 具体代码如下: <!DOCTYPE html P

  • JavaScript调用ajax获取文本文件内容实现代码

    JavaScript调用ajax获取文本文件内容实现代码

    这几年JQuery写多了,传统的的javascript已经很久不写了,不少东西都忘掉了,还有多少人记得javascript中实现ajax操作需要借助XMLHttpRequest对象,其实jquery的ajax本质也是这个,好了,今天就花点时间演示一下如何用传统javascript获取文本内容并展示在页面上,废话不多少,直接上代码,注释写的很详细,大家应该能看懂: 复制代码 代码如下: <script type="text/javascript"> //(A)①获取文本文件方

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • jQuery实现的点击按钮改变样式功能示例

    jQuery实现的点击按钮改变样式功能示例

    本文实例讲述了jQuery实现的点击按钮改变样式功能.分享给大家供大家参考,具体如下: 1. css代码:index4.css @CHARSET "UTF-8"; .sd{ font-weight: bold; color: black; background: red; } 2. jsp代码:index4.jsp <%@ page language="java" import="java.util.*"pageEncoding="

随机推荐