请看代码：
<%@ 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改变样式的例子。
分享到：
相关推荐
当按钮被点击时，JavaScript会动态地将新的CSS样式表（如`red.css`或`blue.css`）链接到`<head>`部分，从而改变网页的视觉呈现。例如： ```javascript function loadStyle(styleFile) { var link = document....
在本文中，我们将深入探讨如何使用JavaScript来动态地改变CSS样式，以实现如标题所示的效果——通过页面JS事件改变字体颜色和背景颜色。 首先，我们需要了解JavaScript的基本概念。JavaScript是一种解释型的、弱...
文件列表中的"threejs简单例子"可能包含HTML、JavaScript和CSS文件，分别用于定义页面结构、实现3D逻辑和样式化。 总的来说，通过这个实例，我们可以了解到Three.js的基本工作流程，包括创建场景、设置相机、加载和...
开发者通过在WXML文件中绑定数据，然后在JS文件中改变对应的数据值，从而实现样式的动态变化。这种方法并不直接操作CSS，而是通过修改数据来间接影响样式。 ### 实现步骤和代码示例 1. **WXML文件配置** 在WXML...
当需要动态改变样式时，我们可以利用JS（逻辑层）来操作数据，并通过`this.setData()`方法更新界面。 以下是一个简单的例子，展示了如何通过JS动态修改view元素的背景颜色： ```html <!-- index.wxml --> ;"> ...
例如，你可能会遇到一个例子，它教你如何创建一个响应式导航栏，当用户滚动页面时，导航栏会根据位置动态改变样式。另一个例子可能是使用AJAX从服务器获取数据并动态显示在网页上。还有可能涉及使用JavaScript和...
在网页开发中，JavaScript（JS）是一种不可或缺的脚本语言，它允许我们与用户交互、处理数据、控制页面行为，包括动态地向网页中添加CSS样式。本文将深入探讨如何通过JS来动态创建和应用CSS样式，以及如何利用AJAX...
在本文中，我们将深入探讨如何使用`template-web.js`模板库实现一个动态的二级联动`select`效果。这个实例提供了一个完整的解决方案，适用于那些希望通过JavaScript和模板引擎优化前端交互体验的开发者。 `template...
例子中可能包含了如何改变HTML元素的内容、样式，或者响应用户事件（如点击按钮）的示例。 JavaScript的DOM（文档对象模型）操作是另一个关键主题。通过DOM，你可以动态地修改网页内容。例子可能展示了如何选择、...
本示例"更换单选按钮样式例子"主要关注的是如何改变HTML中的单选按钮（Radio Button）的默认样式，使其在不同的浏览器环境下，如Firefox，展现出预期的设计。单选按钮是一种常见的表单元素，用于让用户在一组互斥的...
网页上的某个区域，当鼠标移入时改变样式，鼠标移出时自动恢复样式，可以是一个图片的边框，也可以一段文字变色，掌握了原理，貌似可以做更加丰富生动的网页互动效果，这里主要是利用Js控制Hover标签所在的DIV产生...
总结起来，这个例子通过结合JS的动态交互能力和CSS的样式控制，实现了用户友好的表格宽度调整功能。对于开发者来说，理解并掌握这些技术有助于提升Web应用的用户体验，尤其在需要高度定制化界面交互的场景下。这个...
例子可能包含获取元素（`document.getElementById`, `querySelector`等）、添加删除元素、修改属性和样式。 6. **AJAX**： Asynchronous JavaScript and XML，用于在后台与服务器交换数据并更新部分网页，而无需...
"JavaScript程序例子"这个标题暗示我们将探讨一些实际的JS代码示例，这些示例可能是用于演示特定功能或解决常见问题。 描述中的“JSP网页设计”提到了JavaServer Pages（JSP），这是Java的一种服务器端技术，用于...
写JavaScript网页开发例子。”，我们可以推断出这份文档主要涵盖了使用JavaScript进行动态网页开发的相关知识。虽然在给出的部分内容中仅重复显示了网址“www.ckook.com”，但我们可以基于标题和描述中的信息来构建...
在本文中，我们将深入探讨`ng-style`的使用方法，并通过一个实例来展示如何动态地改变元素的样式。 首先，我们需要了解`ng-style`的基本语法。`ng-style`接收一个对象，该对象的键是CSS样式属性，值是对应的样式值...
2. **变色文字**：JavaScript可以改变HTML元素的样式，包括颜色。通过`style.color`属性，我们可以实现文字颜色的动态变化，比如设置一个定时器，每隔一段时间自动更改文字颜色。 3. **跑马灯效果**：跑马灯（也...
在网页设计中，为文本框添加获得和失去焦点时动态改变样式的效果是一个常见需求，这不仅可以提供视觉反馈给用户，增强用户体验，还可以突出显示正在交互的表单元素。本文将详细介绍如何使用jQuery来实现这一效果。 ...
在"ColorBox样式例子"中，我们将探讨如何在实际项目中应用和定制ColorBox。 首先，ColorBox的核心功能是创建一个可自定义的弹出窗口，用于显示单张或一组图片。它支持预加载图像，提供平滑的过渡效果，并且可以轻松...
3. **CSS样式操作**：JavaScript可以直接改变元素的CSS样式，如改变颜色、大小、位置等。这通常通过`element.style`对象实现。 4. **动画效果**：JavaScript可以创建各种动态效果，如淡入淡出、滑动、旋转等。这些...