原生js 样式的操作整理

标签：

内联样式的获取

 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‘ );

原生获取className

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 );   需要自己完善

原生js 样式的操作整理

标签：

原文地址：http://www.cnblogs.com/surfaces/p/4496766.html