js实现css、addClass、removeClass和toggleClass
2015-11-10 09:29
691 查看
JQuery中获取CSS样式
css(name):访问第一匹配元素的样式属性
css(name,value):在所有匹配的元素中,设置一个样式属性的值
css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性
css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值
Javascript中获取样式的值
采用这种方式同样实现了 JQuery的效果。
JQuery中有addClass,removeClass,toggleClass
addClass(class):为每个匹配的元素添加指定的类名
removeClass(class):从所有匹配的元素中删除全部或者指定的类
toggleClass(class):如果存在(不存在)就删除(添加)一个类
采用这种方式同样实现了 JQuery的效果。
css(name):访问第一匹配元素的样式属性
css(name,value):在所有匹配的元素中,设置一个样式属性的值
css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性
css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值
Javascript中获取样式的值
function css(obj, attr, value) { switch (arguments.length) { case 2: if (typeof arguments[1] == "object") { //批量设置属性 for (var i in attr) obj.style[i] = attr[i] } else { // 读取属性值 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr] } break; case 3: //设置属性 obj.style[attr] = value; break; default: return ""; } }
采用这种方式同样实现了 JQuery的效果。
JQuery中有addClass,removeClass,toggleClass
addClass(class):为每个匹配的元素添加指定的类名
removeClass(class):从所有匹配的元素中删除全部或者指定的类
toggleClass(class):如果存在(不存在)就删除(添加)一个类
function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } }
采用这种方式同样实现了 JQuery的效果。
相关文章推荐
- Html11.09CSS层叠样式表内容整理
- CSS选择器
- 纯 CSS 创建各种不同的图形形状
- CSS动态选中效果
- CSS的4种引入方式及优先级
- css布局 : 居中问题
- 8.1.3 CSS3选择器 —— 伪类
- 8.1.2 CSS3选择器 —— 结构性伪类
- css:outline
- gulp教程之gulp-minify-css
- css/js(工作中遇到的问题)-2
- i、span不显示图片,设置宽高不显示
- html中如何显示代码样式方法
- CSS link和@import的区别
- web前端-工作中经常会用到的一些样式
- css--960框架
- CSS设计模式之三权分立模式篇
- CSS3中的Opacity多浏览器透明度兼容性问题
- 基于纯CSS创建各种图形形状
- 百度左右图片按钮的样式