js ondocumentready onmouseover onclick onmouseout 样式

代码如下:

<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()" />
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="doMouseout()" />
<PUBLIC:PROPERTY name="test" />
<SCRIPT LANGUAGE="JavaScript">
var lastObj = null;
var lastColor = null;
function doInit(){
if(element==null){
return;
}
var objT = element.children[0];
try{
objT.rows(0).className="grid_title";
objT.rows(1).className="grid_title";
}
catch(err){
objT.className="grid_title";
}
objT = element.children[1];
if(objT.rows(0)==null){
return;
}
objT.rows(0).className="gridding1";
for(i=1;i<objT.rows.length;i++){
if(i%2==1){
objT.rows(i).className="gridding1";
}
else{
objT.rows(i).className="gridding1";
}
}
}
function doClick(){
if(event.srcElement.tagName=="TD"){
var curObj = event.srcElement.parentElement;
if(curObj.rowIndex==0) return false;
try{
if(curObj.children[0].children.length == 0 ) return false;
}
catch(err){
return false;
}
if(curObj.children[0].children[0].checked){
curObj.children[0].children[0].checked = false;
}
else{
lastObj = curObj;
lastColor = "#FFFFFF";
curObj.children[0].children[0].checked = true;
}
}
if(event.srcElement.tagName =="INPUT"){
try{
var curObj = event.srcElement.parentElement.parentElement;
if(curObj.rowIndex==0) {
var obj = curObj.parentElement.parentElement;
for(i=1;i<obj.rows.length;i++){
if(obj.rows(0).children[0].children[0].checked){
obj.rows(i).children[0].children[0].checked = true;
obj.rows(i).style.backgroundColor="#FFFFFF";
obj.rows(i).style.color="#000000";
}
else{
obj.rows(i).children[0].children[0].checked = false;
if(i%2==1){
obj.rows(i).style.backgroundColor="#FFFFFF";
obj.rows(i).style.color="#000000";
}
else{
obj.rows(i).style.backgroundColor="#FFFFFF";
obj.rows(i).style.color="#000000";
}
}
}
}
}
catch(err){
return true;
}
}
}
function doMouseover(){
if( event.srcElement.tagName=="TD"){
var curObj = event.srcElement.parentElement;
if(curObj.rowIndex==0) return false;
curObj.style.backgroundColor="#F2FFEE";
}
if( event.srcElement.tagName=="INPUT"){
var curObj = event.srcElement.parentElement.parentElement;
if(curObj.rowIndex==0) return false;
curObj.style.backgroundColor="#F2FFEE";
}
}
function doMouseout(){
if(event.srcElement.tagName=="TD"){
var curObj = event.srcElement.parentElement;
if(curObj.rowIndex==0) return false;
try{
if(curObj.children[0].children.length == 0 ) {
if(curObj.rowIndex%2==1){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
return true;
}
}
catch(err){
if(curObj.rowIndex%2==1){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
return true;
}
if(curObj.rowIndex%2==1)
if(curObj.children[0].children[0].checked){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else
if(curObj.children[0].children[0].checked){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
}
if(event.srcElement.tagName=="INPUT"){
var curObj = event.srcElement.parentElement.parentElement;
if(curObj.rowIndex==0) return false;
try{
if(curObj.rowIndex%2==1){
if(curObj.children[0].children[0].checked){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
}
else{
if(curObj.children[0].children[0].checked){
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
else{
curObj.style.backgroundColor="#FFFFFF";
curObj.style.color="#000000";
}
}
}
catch(err){
return true;
}
}
}
</SCRIPT>

(0)

相关推荐

  • 通过onmouseover选项卡实现img图片的变化

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • onmouseover和onmouseout的一些问题思考

    一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout.  很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标在DIV里面移动时也会可能触发onmouseover或onmouseout.  在上图中,对于'A'来说:当鼠标进入'A'(路径'1′)时那么就会触发'A'的onmouseover事件:接着鼠标移动到'B'(路径'2′),此时'A'会触发onmouse

  • JS小功能(onmouseover实现选择月份)实例代码

    效果: 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        #backcolor        {            width: 400px;            height: 400px;            background: #FFFF00;            tex

  • onmouseover事件和onmouseout事件全面理解

    这两天接触了onmouseover事件和onmouseout事件,一直以为它们只是简单的分别实现鼠标指针移动到元素上时触发事件和在鼠标指针移出指定的对象时触发事件,但是突然发现这些只是对它们简单的描述,下面让我们一起看看它们终究还有神马奇怪的特性,是好还是坏呢? 首先实现一个盒子: 给这个盒子上绑定上onmouseover事件和onmouseout事件 发现它们不会发生什么问题,然后(嘿嘿,你懂得!) 让我们创建一个B元素,让它被嵌套在A元素中,作为A的子元素 我们依旧只给外层父元素A绑定onm

  • 兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    前段时间一直找这个的简短实现  网上也有很多方法 昨天发现了这种方法 感觉是用代码最少的 呵呵 ie下支持css的js ff等支持:hover 就这样了 觉得好的就顶起来 无标题文档 #b_g_date tr{ event:expression(onmouseover = function(){this.style.backgroundColor='#E3FFC9'},onmouseout = function(){this.style.backgroundColor='#FFFFFF'});

  • js下关于onmouseout、事件冒泡的问题经验小结

    问题是这样的:一个div元素要触发onmouseout事件,同时这个div内部还有子元素,于是当鼠标移动到该div的子元素上时,onmouseout事件也被触发了.在要做浮动层效果的时候会经常遇到这个问题. 解决方法一: 使用jQuery,这个大家都会的: 复制代码 代码如下: <div id="div1">触发显示浮动层</div> <div id="div2"> <ul> <li>1</li>

  • js 阻止子元素响应父元素的onmouseout事件具体实现

    复制代码 代码如下: $(".target-menu").mouseout(function(e){ evt = window.event || e; var obj = evt.toElement || evt.relatedTarget; var pa = this; if(pa.contains(obj)) return false; $(this).hide(); });

  • js ondocumentready onmouseover onclick onmouseout 样式

    复制代码 代码如下: <PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="doInit()" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="doMouseover()" /> <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()&q

  • 实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上

    一直想实现onmouseover和onmouseout应用于RadioButtonList或CheckBoxList控件上,今晚终于有时间实现它.此功能就是当鼠标经过时RadioButtonList或CheckBoxList每一个Item时,让Item有特效显示,离开时,恢复原样.可以看到效果: RadioButtonList效果: CheckBoxList效果: 这资实现数据,Insus.NET准备了五行(Five Phases) 创建一个对象[Five Phases]:FivePhases.

  • JS获取和修改元素样式的实例代码

    1.获取元素样式: 可以通过元素的style属性,获取元素行内样式.style属性是一个对象,包括一系列样式属性.例如:color, backgourdColor. 上面讲的通过style属性获取元素样式,不推荐使用. 下面的一段代码,可以获取元素运行时的样式,即全局的样式.这种方式可以动态获取元素的样式,例如元素大小. // node:将要获取其计算样式的元素节点 // attr: 样式属性名称 function getCurrentStyle(node, attr) { var style

  • js使用onmousemove和onmouseout获取鼠标坐标的方法

    本文实例讲述了js使用onmousemove和onmouseout获取鼠标坐标的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了onmousemove和onmouseout事件的用法,鼠标在指定区域内移动时会动态显示鼠标坐标信息 <!DOCTYPE html> <html> <head> <script> function myFunction(e) { x=e.clientX; y=e.clientY; coor="Coordinat

  • js获取css的各种样式并且设置他们的方法

    js原生获取css样式,并且设置,看似简单,其实并不简单,我们平时用的ele.style.样式,只能获取内嵌的样式,但是我们写的样式基本都在style属性里面; 这里我们就需要: 下面这个代码主要是设置为了兼容IE这孙子; function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getCompute

  • js获取元素外链样式的方法

    本文实例讲述了js获取元素外链样式的方法.分享给大家供大家参考.具体分析如下: 一般给元素设置行内样式,如<div id="div1" style="width:500px;"></div>.如要获取它的样式,即可document.getElementById("div1").style.width来获取或设置.但是如果样式是在外链link中的或者是页面的非行内样式,就获取不到了. 在标准浏览器中可以通过window.ge

  • js 获取元素的具体样式信息getcss(实例讲解)

    如果想获取元素的某一个具体的样式属性值 1.元素.style.属性名 需要我们把元素的样式都写在行内样式上才可以(写在样式表中是不管用的) console.log(box.style.height)  ->null 在真实项目中,这种方式不常用,因为不能为了获取值而把所有的样式都写在行内(无法实现html和css的分离) 2.使用window.getComputedStyle(当前操作的元素对象,当前元素的伪类[一般我们不用伪类写null])这个方法获取所有经过浏览器计算过的样式 所有经过浏览器

  • js中用cssText设置css样式的简单方法

    如果网页中一个 id为"no"的标签,暂且当div标签来tell: 想要在js中设置这个div的css样式,很一般的做法是: var obj = document.getElementByIdx_x_x('no'); obj.style.width = '400px'; obj.style.height = '300px'; 如果要设置一堆又一堆的css样式呢,太麻烦了把. 一般情况下都会结合css来添加className或者改变className达到想要的效果,但是如果你create

  • vue使用swiper.js重叠轮播组建样式

    本文实例为大家分享了vue使用swiper.js重叠轮播组建样式,供大家参考,具体内容如下 <template> <div class="article-main"> <div class="article-content"> <swiper class="swiper" :options="swiperOption"> <swiper-slide class="

随机推荐