js 動態新增多個class
阿新 • • 發佈：2019-01-24
<!-- <!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>setAttribute('class', 'abc')</title>
<style type="text/css">
.ddddd {
background: black;
}
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id="d1" class="ddddd">test div</div>
<script>
var div = document.getElementById('d1');
// div.setAttribute("class", "abc");
div.className+=" "+'abc'
</script>
</BODY>
</HTML> -->
<html>
<head>
<style type="text/css">
.div2{
font-size:16px;
color:orange;
}
.div3{
font-size:20px;
color:blue;
}
</style>
<script type="text/javascript">
[1]直接把樣式賦值給className
var odiv=document.getElementById('div1');
odiv.className= 'div3'
//這樣我們會得到 class ="div3" 會直接把div2樣式給覆蓋掉;
[2]使用累加賦值給className
var odiv=document.getElementById('div1');
odiv.className+=" "+'div3' //樣式和樣式之間需要空隙 ，所以加個空字串隔開
//這樣可以得到 class="div2 div3" 可以正常增加，但是我們在新增樣式的時候我們得考慮下他本身之前有沒有同名的樣式，如果有我們新增的話就會變成累贅 比如class="div2 div3 div3";
[3]檢測樣式原先之前是否有相同的樣式
var odiv=document.getElementById('div1');
function hasClass(element,csName){
element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
[4]在[3]的基礎上我們就可以進行判斷性給元素新增樣式了
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
}
addClass(odiv,'div3');
//這樣就可以靈活給元素新增樣式了;
【元素刪除指定樣式】
//同樣先進行判斷，在進行刪除
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
function deleteClass(element,csName){
if(!hasClass(element,csName)){
element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正則捕獲到要刪除的樣式的名稱，然後把他替換成一個空白字串，就相當於刪除了
}
deleteClass(odiv,div3);
}
</script>
</head>
<body>
<div id="div1" class='div2'> 測試</div>
</body>
</html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<title>setAttribute('class', 'abc')</title>
<style type="text/css">
.ddddd {
background: black;
}
.abc {
background: red;
}
</style>
</HEAD>
<BODY>
<div id="d1" class="ddddd">test div</div>
<script>
var div = document.getElementById('d1');
// div.setAttribute("class", "abc");
div.className+=" "+'abc'
</script>
</BODY>
</HTML> -->
<html>
<head>
<style type="text/css">
.div2{
font-size:16px;
color:orange;
}
.div3{
font-size:20px;
color:blue;
}
</style>
<script type="text/javascript">
[1]直接把樣式賦值給className
var odiv=document.getElementById('div1');
odiv.className= 'div3'
//這樣我們會得到 class ="div3" 會直接把div2樣式給覆蓋掉;
[2]使用累加賦值給className
var odiv=document.getElementById('div1');
odiv.className+=" "+'div3' //樣式和樣式之間需要空隙 ，所以加個空字串隔開
//這樣可以得到 class="div2 div3" 可以正常增加，但是我們在新增樣式的時候我們得考慮下他本身之前有沒有同名的樣式，如果有我們新增的話就會變成累贅 比如class="div2 div3 div3";
[3]檢測樣式原先之前是否有相同的樣式
var odiv=document.getElementById('div1');
function hasClass(element,csName){
element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
[4]在[3]的基礎上我們就可以進行判斷性給元素新增樣式了
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
function addClass(element,csName){
if(!hasClass(element,csName)){
element.className+=' '+csName;
}
addClass(odiv,'div3');
//這樣就可以靈活給元素新增樣式了;
【元素刪除指定樣式】
//同樣先進行判斷，在進行刪除
var odiv=document.getElementById('div1');
function hasClass(element,csName){
return element.className.match(RegExp('(\\s|^)'+csName+'(\\s|$)')); //使用正則檢測是否有相同的樣式
}
function deleteClass(element,csName){
if(!hasClass(element,csName)){
element.className.replace(RegExp('(\\s|^)'+csName+'(\\s|$)'),' '); //利用正則捕獲到要刪除的樣式的名稱，然後把他替換成一個空白字串，就相當於刪除了
}
deleteClass(odiv,div3);
}
</script>
</head>
<body>
<div id="div1" class='div2'> 測試</div>
</body>
</html>