`
hz_chenwenbiao
  • 浏览: 994508 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 动态改变样式例子

    博客分类：
  • JS
JavaScriptHTML 
阅读更多

请看代码：

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <title>用JS动态改变样式</title>
    
<script language="javascript" type="text/javascript">

function $(element) {
	  if (typeof element == 'string')
	    return document.getElementById(element);
}

//获取焦点时触发
function questionOnFocus(obj){
	
	if (obj.value =='请输入您的问题！(限40字)'){
		$("ptitle").className = "my_font_color2";
		obj.value ='';
	}
}

//失去焦点时触发
function questionOnBlur(obj){

	if(obj.value =='' || obj.value =='请输入您的问题！(限40字)'){
		$("ptitle").className= "my_font_color1";
	}
	else{
		$("ptitle").className = "my_font_color2";
    }

    if(obj.value ==''){
		obj.value='请输入您的问题！(限40字)';
	}
}

//获取焦点时触发
function descriptionOnFocus(obj){

	
	if (obj.value =='请描述您的问题！(限500字)'){
		$("pcontent").className = "my_font_color2";
		obj.value ='';
	}
}

//失去焦点时触发
function descriptiOnBlur(obj){

	if (obj.value ==''){
		$("pcontent").className= "my_font_color1";
		obj.value='请描述您的问题！(限500字)';
	}
	else{
		$("pcontent").className = "my_font_color2";
    }
}
</script>

<style>

.my_font_color1{font-family:Arial, Helvetica, sans-serif;color:blue;}
.my_font_color2{font-family:Arial, Helvetica, sans-serif;color:red;}

</style>    

  </head>
  
  <body>
    <center>
			标题：<input type="text" size="34" maxlength="40"
								id="ptitle" name="ptitle"
								value="请输入您的问题！(限40字)" 
								class="my_font_color1"
								onBlur="questionOnBlur(this)"
								onFocus="questionOnFocus(this)"></input>
			<br/>描述：
			<textarea id="pcontent" name="pcontent" 
								cols="37" rows="7"
								onBlur="descriptiOnBlur(this)"
								onFocus="descriptionOnFocus(this)"
								class="my_font_color1">请描述您的问题！(限500字)</textarea>
		</center>
  </body>
</html>
 

上面就是简单的js改变样式的例子。

 

分享到：
| hibernate获取记录行数异常
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    鼠标移入移出改变CSS样式的小例子

    网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生...

    echarts折线图曲线图分段用不同颜色显示，曲线改变颜色例子，Y轴超过某一数值曲线变色

    echarts折线图曲线图分段用不同颜色显示，Y轴超过某一数值变色,echarts曲线改变颜色例子,x轴和y轴数据可以自己定义,曲线默认显示黑色(black)，400以上900以下显示成金色(gold)。 核心代码 visualMap: { show: false...

    JavaScript王者归来part.1 总数2

    　12.7.6 改变样式及其范例　 　12.7.7 改变行为　 　12.8 XML DOM　 　12.8.1 什么是XML DOM　 　12.8.2 如何使用XML DOM--一个利用XML实现多级关联下拉选择框的例子　 　12.9 总结　 　第13章 事件处理 　13.1 ...

    js 实现客户端颜色换肤

    现在为了界面实现多样化，实现布局和样式的美观要求，增加了在界面上动态的改变每个页面的样式要求，能根据不同颜色来实现颜色的动态改变，这只是一个例子： webTest\WebRoot\js\cookieopt.js这是一个实现存储和...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    12.7.htm 使用Ajax动态改变局部元素样式 CSSmenu 使用Ajax+CSS实现动态菜单效果 第13章（/C13/） 13.1.xml 一个简单的xml文件 13.1.xsl 使用XSLT将XML转换为HTML 13.2.xml ...

    Javascript数组操作高级心得整理

     使用节点对象的style属性对象改变样式 27  使用className设置样式 27 3. 继承机制实现 27 (1) 继承的方式 27 (2) 继承方式1—对象冒充 27 (3) 继承方式2—call()方法与apply()方法 28  call()方法 28  ...

    让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

    解决办法：换一个js包含的方式，让javascript加载速度倍增。 把通常加载方式： [removed][removed] 改变成： 代码如下: [removed] [removed](“”xxx.js\”&gt;”) [removed] 举个例子： 比如下面是申请的站长统计...

    精通javascript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    纯js和css实现渐变色包括静态渐变和动态渐变

    所谓动态渐变，举个简单的例子：他来了，她的脸渐渐红了…渐渐的，渐渐改变的，是不断在改变的；而静态渐变，也就更简单了：天上一到彩虹，赤橙黄绿青蓝紫啊…在当前展示的成品中，颜色从一部分到另一部分的颜色是...

    精通JavaScript

    • 1.3.js 1.3.htm使用的外部JavaScript文件 第2章（\第2章） • 2.1.htm Infinity应用 • 2.2.htm NaN与isNaN()的用法 • 2.3.htm Infinity值的用法 • 2.4.htm 转义字符的使用 ...

    JavaScript HTML DOM – 改变CSS

    JavaScript HTML DOM – 改变CSS ...下面的例子会改变 元素的样式： 实例 软件开发网(mscto.com) Hello World! Hello World! document.getElementById("p2").style.color="blue"; document.getElementById("p2").st

    ztree根据文本内筛选叶子节，并改变叶子节点字体颜色

    ztree根据文本内筛选叶子节，并改变叶子节点字体颜色,注意例子不是bak备份html，含Ztree需要的js控件。

    vb_js_example.rar_VB CallByName JS_VB控制_[JS_example.js]_vb WebBr

    VB代码与WebBrowser控制中的HTML代码，互相控制... 点VB中的按钮，改变网页的显示样式或内容。点网页中的按钮，修改VB中控件的属性，或调用VB中的函数。这只是一个如何实现的示例，没有什么强大功能，代码有中文说明。

    JavaScript CSS修改学习第二章 样式

    举个例子，使用offsetWidth。你就能知道这个段落现在的宽度的像素值。为了测试，你可以改变一下窗口的大小然后再运行一下。 代码也非常的简单： 代码如下: function getOff() { x = document.getElementById(‘test...

    js使用小技巧

    取变量类型 typeof($js_libpath) == "undefined" 下拉框 下拉框.options[索引] 下拉框.options.length 查找对象 document.getElementsByName("r1"); document.getElementById(id); 定时 timer=setInterval...

    colorista:动态、轻松地更改 CSS 颜色样式

    举个例子： spec = { '.className': ['color'], '#id': ['background-color'], 'element1, element2': ['border-bottom-color', 'border-left-color'] } 该脚本调用来检索元素，因此选择器只需使用该方法

    custom-file-input:自定义 html 文件输入。 添加样式。 改变按钮位置

    有史以来最好的 jQuery 插件。 入门 下载 或。 在您的网页中： &lt; script src =" jquery.js " &gt; &lt;/ script &gt;... script src =" dist/custom-html-file-input.min.js " &gt;...例子 发布历史 （还没有）

    jquery ajax TreeView asp.net改进版

    &lt;script src="lib/jquery/plugins/treeview/js/jquery.tree.js" type="text/javascript"&gt; &lt;%--&lt;script src="lib/jquery/plugins/treeview/js/getData.js" type="text/javascript"&gt;&lt;/script&gt;--%&gt; ...

    基于JavaScript实现轮播图原理及示例

    网上有很多的例子介绍，在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。 我们首先看一下 div+css 的结构样式： div+css代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt...

    jQuery Validate初步体验(一)

    但是在学习的过程中，我也遇到了疑惑，网上的很多例子貌似都是依赖jquery.metadata.js这个库，然后在标签里写成class=”required remote” 这样的形式，class本身是呈现样式的，现在被附上各种校验的规则，看上去...

Magicbox
Global site tag (gtag.js) - Google Analytics