当前位置: 网站建设 > 网页设计 > 建站经验 >

设置class元素的三种方式

时间:2013-03-02 04:14来源:未知 作者:admin 点击:

标签:设置class元素的三种方式 CLASS(21)clas(1)网站建设(1202)三种(5)设置(27)方式(34)元素(40)
--> [网站建设之]设置class元素的三种方式 列举所有的方法,看看各阅读器的支撑差别。 一、el.setAttribute('class','abc'); 01 !DOCTYPE HTML 02 HTML 03 HEAD 04 meta charset=utf-8 / 05 titlesetAttribute('class', 'abc')/title 06 style type=text/css 07 .abc { 08 background: red; 09 } 10 /style 11 /HE
设置class元素的三种方式》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/030234V12013.htm
--> [网站建设之]设置class元素的三种方式

列举所有的方法,看看各阅读器的支撑差别。

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

  01 <!DOCTYPE HTML>

  02 <HTML>

  03 ,论打造成功的病毒广告; <,论好的设计;HEAD>

  04     <meta charset="utf-8" />

  05     <title>setAttribute('class', 'abc')</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.setAttribute("class", "abc");

  17     </script>

  18  </BODY>

  19 </HTML>

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

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

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

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

  01 <!DOCTYPE HTML>

  02 <HTML>

  03  <HEAD>

  04     <meta charset=",论坛常用几种防恶意广告方法优劣分析;utf-8" />

  05     <title>setAttribute('className', 'abc')</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.setAttribute("className", "abc");

  17     </script>

  18  </BODY>

  19 </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';

  01 <!DOCTYPE HTML>

  02 <,论团购网站运营真谛;HTML>

  03  <HEAD>

  04     <meta charset="utf-8" />

  05     <title>el.className = 'abc'</title>

  06     <style type="text/css">

  07         .abc {

  08             background: red;

  09         }

  10     </style>

  11  </HEAD>

  12  <BODY>

  13     <div id="d1">test div</div>

  14     <script>

  15         var div = document.getElementById('d1');

  16         div.className = 'abc';

  17     </script>

  18  </BODY>

  19 </HTML>

  所有浏览器都支持。 Tag:class元素   class元素  ,论WEB设计;
(责任编辑:网站建设)
设置class元素的三种方式相关文章
上一篇:论打造成功的病毒广告 下一篇:设计三要素:清晰、独创、幽默
回到顶部