javaScript給元素添加多個class

時間 2019-11-30

標籤 javascript 元素添加多個 class 欄目 JavaScript 简体版

原文原文鏈接

<html>javascript

　　<head>css

　　　　<style type="text/css">html

　　　　　　.div2{java

　　　　　　font-size:16px;　測試

　　　　　　color:orange;htm

　　　　　　}ip

　　　　　　.div3{element

　　　　　　font-size:20px;字符串

　　　　　　color:blue;get

　　　　　　}

　　　　<style>

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

　　</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。