Summary of three methods to set element class in js_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Summary of three methods to set element class in js_javascript skills

May 16, 2016 pm 06:02 PM

class element

1. el.setAttribute('class','abc');

Copy code The code is as follows:

 
<!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: The background color of the div is not red
IE8/9/10/Firefox/Safari/Chrome/Opera: The background color of the div is red
Result: IE6/ 7 does not support the setAttribute('class',xxx) method to set the class of an element.
2. el.setAttribute('className', 'abc')

Copy code Code As follows:

 
<!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: The background color of the div is red
IE8/9/10/Firefox/Safari/Chrome/Opera: The background color of the div is not red
Result: IE8/9/10/Firefox/Safari/Chrome/Opera does not support the setAttribute('className',xxx) method to set the class of an element.
It’s interesting that when using setAttribute, the first parameters are class and className. The situation is exactly the opposite in IE6/7 and IE8/9/10/Firefox/Safari/Chrome/Opera.
3. el.className = 'abc';

Copy code The code is as follows:

 
<!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> 

Supported by all browsers.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn