【js：setAttribute 的兼容性】class（eg）,style

最新推荐文章于 2022-03-12 00:02:55 发布

jacky__bj

最新推荐文章于 2022-03-12 00:02:55 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/baojie1022/article/details/45692187

版权

前端专栏收录该内容

17 篇文章

订阅专栏

一、class和className兼容方法：

object.setAttribute("class","content")

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute("className","content")

只有IE7能设置成功，但是其他浏览器均无法设置。

兼容方法：

使用

object.className="content" 来设置

var x = object.className 来获取

二、style和cssText兼容方法：

object.setAttribute("style","position:absolute;left:10px;top:10px;")

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute("cssText","position:absolute;left:10px;top:10px;")

此设置方法，所有浏览器均不支持。

兼容方法：

使用 object.style.cssText="position:absolute;left:10px;top:10px;"

或者单独 object.style.各个属性，逐一进行设置。

三、jquery操作class属性（hasClass、removeClass、toggleClass、addClass、attr（“class”））

http://blog.163.com/yxba_02/blog/static/1875576201391255411142/

获取与设置样式获取class和设置class都可以使用attr()方法来完成。

例如使用attr()方法来获取p元素的class

var p_class = $("p").attr("class"); //获取p元素的class

使用attr()方法来设置p元素的class，JQuery代码如下：

$("p").attr("'class", "high"); //设置p元素的class为 "high"

http://blog.163.com/yxba_02/blog/static/1875576201391255411142/

w3School js对属性的操作

http://www.w3school.com.cn/jquery/jquery_ref_attributes.asp

————————————————————————————————————————————————————————

eg：

<dl class="sort unfold" id="category" οnclick="clickFold(index)">
	<dt><i></i>类别</dt>
	<dd><a href="#">净水机</a></dd>
	<dd><a href="#">纯水机</a></dd>
	<dd><a href="#">前置过滤器</a></dd>
	<dd><a href="#">台上式净水器</a></dd>
	<dd><a href="#">水龙头净水器</a></dd>
	<dd><a href="#">智能热饮机</a></dd>
	<dd><a href="#">全屋净水</a></dd>
	<dd><a href="#">滤芯耗材</a></dd>
	<dd><a href="#">智能热饮机</a></dd>
</dl>
<dl class="sort" id="brand" οnclick="clickFold(index)">
	<dt><i></i>品牌</dt>
	<dd><a href="#">净水机</a></dd>
	<dd><a href="#">纯水机</a></dd>
	<dd><a href="#">前置过滤器</a></dd>
	<dd><a href="#">台上式净水器</a></dd>
	<dd><a href="#">水龙头净水器</a></dd>
	<dd><a href="#">智能热饮机</a></dd>
	<dd><a href="#">全屋净水</a></dd>
	<dd><a href="#">滤芯耗材</a></dd>
	<dd><a href="#">智能热饮机</a></dd>
</dl>

js实现：兼容

function clickFold(index){ 
	var c = document.getElementById("category").className;
	var b = document.getElementById("brand").className;
	if(index == 0){
		// 分类 
		if(c=="sort unfold"){
			 document.getElementById("category").className = "sort";
		}else{
			if(b == "sort")
				 document.getElementById("category").className = "sort unfold" ;
		} 
	}else if(index == 1){ 
		// 品牌
		if(b=="sort unfold"){
			 document.getElementById("brand").className = "sort";
		}else{
			if(c == "sort")
				 document.getElementById("brand").className = "sort unfold" ;
		} 
	}
}

AJAX实现：兼容——>一个打开，另一个关闭

function clickFold(index){ 
            var c = $("#category").attr("class");
            var b = $("#brand").attr("class");
            console.log(c+"--------------"+b);
            if(index == 0){
                // 分类 
                if(c=="sort unfold"){// 打开状态
                     $("#category").attr("class","sort");
                     $("#brand").attr("class","sort unfold") ;
                     
                }else{// 关闭状态 
                        $("#category").attr("class","sort unfold") ;
                        $("#brand").attr("class","sort");
                } 
            }else if(index == 1){ 
                // 品牌 
                if(b=="sort unfold"){// 打开状态
                    $("#category").attr("class","sort unfold") ;
                         $("#brand").attr("class","sort");
                }else{// 关闭状态 
                    $("#category").attr("class","sort");
                     $("#brand").attr("class","sort unfold") ;
                } 
            }
         
        }