`
lw4135
  • 浏览: 46917 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js控制获得焦点与失去焦点样式

 
阅读更多
	
 function focusInput(focusClass, normalClass) {
        var elements = document.getElementsByTagName("input");
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].type != "button" && elements[i].type != "checkbox" && elements[i].type != "radio" 
            && elements[i].type != "submit" && elements[i].type != "reset") {
                elements[i].className = normalClass;
                elements[i].onblur = function() {
                    this.className = normalClass;
                };
                elements[i].onfocus = function() {
                    this.className = focusClass;
                };

            }
        }
    }
 //页面一加载就应用这种样式
 window.onload = function () {
        focusInput('input50_focus', 'input50');
        focusTextarea('textarea50_focus','textarea50');
    }

 //创建第一个td
	   var td = tr.insertCell(1);
       td.innerHTML = "<input type=\"hidden\" name=\"summaryId"+num+"\"  id=\"summaryId"+num+ "\" /> <input type=\"hidden\" name=\"personInChargeId"+num+"\"  id=\"personInChargeId"+num+"\"/>"+
       " <input type=\"text\" name=\"personInChargeName"+num+"\" id=\"personInChargeName"+num+"\"  />";
       focusInput('input50_focus','input50');


方式一:
td.style.cssText="BORDER-BOTTOM:   #4a75ce   1px   solid";    

方式二:
td.className="样式";  

//虽然我玉树临风,风流倜傥,有广阔的胸怀和强健的臂腕,有杨过的冷酷、韦小宝的多情、郭靖的纯朴、张无忌的优柔、乔峰的豪爽,但是你若是喜欢我可以跟我说的呀,我一定会认真考虑的一 一!
分享到:
评论

相关推荐

    JS焦点图多种样式

    JavaScript焦点图,通常被称为JS幻灯片或轮播图,是一种网页设计中常见的元素,用于展示多张图片或内容,并通过自动切换或用户交互来呈现不同的焦点内容。这种技术广泛应用于门户网站、产品展示、新闻更新等场景,为...

    视频播放器样式Flash焦点图.rar

    JavaScript可以与Flash内容进行交互,例如,通过JavaScript控制Flash的启动、停止或者更改显示的内容。同时,JavaScript也可以独立实现焦点图的功能,特别是在现代网页设计中,JavaScript库如jQuery、React或Vue.js...

    万能JS焦点图

    - **js**:这个文件夹很可能包含焦点图的JavaScript实现,其中的代码实现了自动轮播、箭头导航和标码切换等功能。 为了实现这个万能JS焦点图,开发者需要对HTML结构有基本了解,能够编写和理解CSS样式,同时要熟悉...

    js控制输入框获得和失去焦点时状态显示的方法

    `&lt;form&gt;`元素用于收集用户输入的数据,通过其属性`action`...通过上述知识点的介绍,我们能够理解js如何通过操作输入框的获得和失去焦点状态来控制不同样式的显示,并知道这对于提供更好的用户交互体验是十分有用的。

    js焦点图源码

    3. **js**:这个文件夹可能包含焦点图的JavaScript代码,其中可能有一个或多个.js文件,如"焦点图.js",这些文件实现了焦点图的逻辑,如定时器控制自动播放、响应用户交互、动画效果等。 4. **css**:这个文件夹内...

    透明切换tab标签样式焦点图轮播效果

    在网页设计中,"透明切换tab标签样式焦点图轮播效果"是一种常见且吸引用户的交互设计元素。这种效果结合了标签页(Tab)导航和焦点图轮播的特性,为用户提供了一种直观、动态的方式来浏览和切换不同内容区块。下面...

    6种焦点图样式及代码

    本资源提供了6种不同的焦点图样式及其对应的代码,帮助开发者实现多样化的视觉效果。以下是这些焦点图样式的详细解释和相关知识点: 1. **基本样式焦点图**: 这是最常见的焦点图样式,通常包含一个导航条,显示...

    傲游网站JS焦点图代码.zip

    总的来说,这个压缩包提供了一个完整的JavaScript焦点图解决方案,包括了前端开发所需的HTML、CSS和JS代码。开发者可以通过学习和修改这些代码,为自己的网站定制个性化的焦点图效果。理解并运用这些技术,对于提升...

    js实现首页焦点图片切换效果

    - **js脚本大全**:可能包含实现焦点图片切换效果的JavaScript代码。 - **js讨论社区.url**:可能是一个链接,指向有关JavaScript编程的在线讨论社区,供开发者寻求帮助或分享经验。 - **css**:目录可能包含样式表...

    js首页按钮控制焦点图片滚动.zip

    在JavaScript编程领域中,"js首页按钮控制焦点图片滚动"是一种常见的网页动态效果,用于提升用户体验,特别是应用于网站的首页。这种技术通过JS脚本控制图片的自动滚动,并且使用"L"(左)和"R"(右)按钮代替传统的...

    JS大号箭头焦点图

    1. **JavaScript**:作为网页动态效果的核心,JavaScript负责处理焦点图的逻辑控制。例如,监听用户点击箭头的事件,根据用户的选择执行相应的切换操作,同时处理自动轮播和定时器功能。 2. **jQuery**:jQuery是一...

    JS超炫切换效果焦点图代码

    "JS超炫切换效果焦点图代码"指的是利用JavaScript实现的一种动态、吸引用户注意力的图片轮播功能,常用于网站的首页或者产品展示区域。这种焦点图效果可以使用户体验更加丰富,提升网站的互动性和视觉吸引力。 焦点...

    js带缩略图的焦点图

    综上所述,js带缩略图的焦点图是一个结合了JavaScript、DOM操作、事件处理、图片适配和动画效果的复杂但实用的网页组件。它为用户提供了一种优雅的方式去展示和浏览多张图片,提升了网页的互动性和视觉吸引力。

    Flash书签样式焦点图代码.rar

    《Flash书签样式焦点图代码解析与应用》 在网页设计中,焦点图或幻灯图是一种常见的元素,用于展示一系列图片或信息,通过动态效果吸引用户的注意力。本篇文章将详细解析“Flash书签样式焦点图代码”,并探讨其在JS...

    原生JS左右滚动焦点图.zip

    - 基本思想是利用JavaScript控制DOM(文档对象模型)元素的CSS样式,特别是`left`或`transform`属性,来实现图片的左右平滑滚动。 - 通常会有一个包含多个子元素(图片)的容器,通过改变容器的位置来达到滚动效果...

    纯JS实现的焦点图代码

    【纯JS实现的焦点图代码】是一种无需依赖任何外部库,仅使用JavaScript语言编写的用于创建动态焦点图的解决方案。这种技术在网页设计中广泛应用于展示产品、图片轮播或重要信息的高亮显示,为用户提供更加吸引人的...

    迅雷音乐频道今日焦点JS代码

    "焦点 js"标签进一步确认了我们的讨论重点,即如何使用JavaScript来创建和控制网页上的焦点效果。这种效果可能是通过改变图片、文字或其他元素的显示来实现的,以吸引用户的注意力并提供交互性。 在压缩包中的"迅雷...

    JS四屏焦点图代码.zip_JS四屏焦点图代码

    【标题】"JS四屏焦点图代码.zip" 是一个压缩包,其中包含了实现JavaScript四屏焦点图所需的各种文件。这个代码实例通常用于网页设计,帮助网站在不同屏幕尺寸上展示多张图片或内容,实现一个动态且吸引用户的交互式...

    控件获得焦点时变色.rar

    6. **自定义样式**:在某些框架或库中,可以自定义样式表(CSS或类似概念)来统一控制所有控件获得焦点时的变色效果,保持界面一致性。 7. **优化与调试**:在实际应用中,需确保颜色变化不会导致其他问题,如颜色...

    JS 商城焦点图

    总之,创建一个JS商城焦点图涉及JavaScript编程、DOM操作、CSS样式、响应式设计、性能优化等多个方面,是一个综合性的实践过程。通过学习和实践,你可以构建出既美观又实用的焦点图组件,提升网站的用户体验。

Global site tag (gtag.js) - Google Analytics