zoukankan      html  css  js  c++  java
  • 设置元素class的三种方式

    列举所有的方式,看看各浏览器的支持差异。

    一、el.setAttribute('class','abc');

    <!DOCTYPE HTML>
    <HTML>
     <HEAD>
    	<meta charset="utf-8" />
    	<title>setAttribute('class', 'abc')</title>
    	<style type="text/css">
    		.abc {
    			background: red;
    		}
    	</style>
     </HEAD>
     <BODY>
     	<div id="d1">test div</div>
    	<script>
    		var div = document.getElementById('d1');
    		div.setAttribute("class", "abc");
    	</script>
     </BODY>
    </HTML>
    

    IE6/7 : div背景色不是红色

    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色

    结果:IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

    二、el.setAttribute('className', 'abc')

    <!DOCTYPE HTML>
    <HTML>
     <HEAD>
    	<meta charset="utf-8" />
    	<title>setAttribute('className', 'abc')</title>
    	<style type="text/css">
    		.abc {
    			background: red;
    		}
    	</style>
     </HEAD>
     <BODY>
     	<div id="d1">test div</div>
    	<script>
    		var div = document.getElementById('d1');
    		div.setAttribute("className", "abc");
    	</script>
     </BODY>
    </HTML> 

    IE6/7 : div背景色为红色

    IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色

    结果:IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。

    很有趣,使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。

    三、el.className = 'abc';

    <!DOCTYPE HTML>
    <HTML>
     <HEAD>
    	<meta charset="utf-8" />
    	<title>el.className = 'abc'</title>
    	<style type="text/css">
    		.abc {
    			background: red;
    		}
    	</style>
     </HEAD>
     <BODY>
     	<div id="d1">test div</div>
    	<script>
    		var div = document.getElementById('d1');
    		div.className = 'abc';
    	</script>
     </BODY>
    </HTML>
    

    所有浏览器都支持。

  • 相关阅读:
    1041 考试座位号
    1040 有几个PAT
    1039 到底买不买
    1038 统计同成绩学生
    1037 在霍格沃茨找零钱
    1036 跟奥巴马一起编程
    1035 插入与归并
    vue-router--路由传参
    vue-router--路由原理
    vuex--在computed中使用
  • 原文地址:https://www.cnblogs.com/snandy/p/2154952.html
Copyright © 2011-2022 走看看