定义和用法:
addClass() 方法向被选元素添加一个或多个类。
该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
提示:如需添加多个类,请使用空格分隔类名。
语法:
$(selector).addClass(class)
参数class 是必需。规定一个或多个 class 名称。
使用函数来添加类:使用函数向被选元素添加类。
语法:
$(selector).addClass(function(index,oldclass))
描述: 为每个匹配的元素添加指定的样式类名
.addClass( className ),className为一个String字符串,为指定元素添加这个classname的类
.addClass(
function(index, currentClass) ),这个函数返回一个或更多用空格隔开的要增加的样式名。接收index
参数表示元素在匹配集合中的索引位置和html 参数表示元素上原来的 HTML 内容。在函数中this指向匹配元素集合中的当前元素。
for example:
源码中:
//假设一天只有一条,就取第一条 var dataItem=todayData[0]; //可以判断数据情况,然后对日期上的日期进行处理 //这里就把“异常”或者“巡检”数据的日期背景变成红色或者蓝色 if (dataItem.flag==='异常') { $(day).addClass('abnormal-red'); } else if (dataItem.flag==='巡检'){ $(day).addClass('check-blue'); }
样式css文件中:
/*异常数据日期改变样式红色 */ .abnormal-red{ background-color:red; color:white; width:20px; height:20px; border-radius:50%; overflow:hidden; } /*巡检数据日期改变样式蓝色 */ .check-blue{ background-color:#00A2E8; color:white; width:20px; height:20px; border-radius:50%; overflow:hidden; }
结果展示:
原来是这样的:(此法不行,因为在源码中嵌入了样式文件。上面的方法避免在源码中嵌入样式文件)
//假设一天只有一条,就取第一条 var m=d[0]; //可以判断数据情况,然后对日期上的日期进行处理 //这里就把“异常”或者“巡检”数据的日期背景变成红色或者蓝色 if (m.flag==="异常") { $(day).css({'background-color':'red','color':'white','width':'20px','height':'20px', 'border-radius':'50%','overflow':'hidden'}); } else if (m.flag==="巡检"){ $(day).css({'background-color':'#00A2E8','color':'white','width':'20px','height':'20px', 'border-radius':'50%','overflow':'hidden'}); }