function getStyle(obj,attr){//简单的获取内联样式 return obj.currentStyle?obj.currentStyle[attr]:obj.getComputedStyle(obj,false)[attr]; }
//参考地址 http://stylechen.com/getstyle2.html
var getStyle = function( elem, style ){ //单位如果em或%的单位,getComputedStyle()返回的值就会自动将em或%换成px的单位,currentStyle就不会,而如果是font-size使用em为单位,在Opera下返回的是0em,Opera真的很恐怖! return 'getComputedStyle' in window ? getComputedStyle( elem, null )[style] : function(){ style = style.replace( /\-(\w)/g, function( $, $1 ){ return $1.toUpperCase(); }); var val = elem.currentStyle[style]; if( val === 'auto' && (style === "width" || style === "height") ){ var rect = elem.getBoundingClientRect(); if( style === "width" ){ return rect.right - rect.left + 'px'; }else{ return rect.bottom - rect.top + 'px'; } } return val; }(); };
// 调用该方法
//var test = document.getElementById( 'test' ),
// 获取计算的宽度
//tWidth = getStyle( test, 'width' );
function getClass(parent,className,tagName){ //var parent = parent || document, var parent = !!(parent != undefined&&parent.nodeType==1)?parent:document, //parent参数是可选的,但需要先判断它是否存在,且是节点dom元素 parent != undefined&&parent.nodeType==1 ,nodeType == 1可以判断节点是否为dom元素,在火狐浏览器里面,空白也算是节点(.childnodes),用这个属性就判断是否为dom元素,排除空白符. tagName = tagName || "*"; //alert(parent.nodeName); //ul if(parent.getElementsByClassName){ return parent.getElementsByClassName(className); }else{ var aEls =parent.getElementsByTagName(tagName),arr = [],re=new RegExp('(^|\\s)'+className+'($|\\s)'); for (var i = 0; i < aEls.length; i++) { re.test(aEls[i].className) && arr.push(aEls[i]); }; return arr; }; } ; //获取class (因为获取一组元素集合,如果单个使用一定要加[0]下标,不然会报错)
function addClass(ele,cls) { if (!this.hasClass(ele,cls)) ele.className += " "+cls; }
另外一种比较好的
function addclass(elm,cls){ // 参考地址 :http://www.ghugo.com/transfer-should-have-known-7-javascript-skills/ var classes = elm.className.split(' '); classes.push(cls); elm.className = classes.join(' '); }
function hasClass(ele,cls) { return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); }
function removeClass(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className=ele.className.replace(reg,' '); } }
以上是利用了原生js对样式的操作获取
Html5新增的api接口,
<script> /*! * classie - class helper functions * from bonzo https://github.com/ded/bonzo * * classie.has( elem, 'my-class' ) -> true/false * classie.add( elem, 'my-new-class' ) * classie.remove( elem, 'my-unwanted-class' ) * classie.toggle( elem, 'my-class' ) */ /*jshint browser: true, strict: true, undef: true */ /*global define: false */ ;( function( window ) { 'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) { return elem.classList.contains( c ); }; addClass = function( elem, c ) { elem.classList.add( c ); }; removeClass = function( elem, c ) { elem.classList.remove( c ); }; } else { hasClass = function( elem, c ) { return classReg( c ).test( elem.className ); }; addClass = function( elem, c ) { if ( !hasClass( elem, c ) ) { elem.className = elem.className + ' ' + c; } }; removeClass = function( elem, c ) { elem.className = elem.className.replace( classReg( c ), ' ' ); }; } function toggleClass( elem, c ) { var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c ); } var classie = { // full names hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, // short names has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass }; // transport if ( typeof define === 'function' && define.amd ) { // AMD define( classie ); } else { // browser global window.classie = classie; } })( window ); </script>
以上的缺点:只能添加单个样式 elem.classList.add( classNameOne ); 需要自己完善