更改多個CSS類與JS

我需要改變5類，使用JS更改多個CSS類與JS

var left = document.getElementById("right").className = "left";

.right { 
 
    float: right; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<button onclick="changeLeft()">Sinistra</button> 
 
<div class="newsright"> 
 
    <img src="images/angular.png" alt="HTML" id="right" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

我怎麼能這樣做的另一個名字有相同的名字？

來源

2017-10-07 Matteo Cardillo

5類，具有相同的名稱？解釋 –

所有的類都被命名爲「正確」，我希望通過一個按鈕，所有具有該名稱的5個類將被重命名爲「左」 –

您可以使用簡單的jQuery此：

function changeLeft() { 
 
    $('.right').each(function() { 
 
    $(this).removeClass('right'); 
 
    $(this).addClass('left'); 
 
    }); 
 
}

.newsright { 
 
clear:both; 
 
margin-bottom:5px; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button onclick="changeLeft()">Sinistra</button> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/100/50/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/60/40/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/50/50/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

你也可以使按鈕在兩個類之間切換，如下所示：

function switchClass() { 
 
    $('.right,.left').each(function() { 
 
    $(this).toggleClass('right left'); 
 
    }); 
 
}

.newsright { 
 
clear:both; 
 
margin-bottom:5px; 
 
} 
 
.right { 
 
    float: right; 
 
} 
 

 
.left { 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<button onclick="switchClass()">Sinistra</button> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/100/50/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/60/40/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div> 
 
<div class="newsright"> 
 
    <img src="https://lorempixel.com/50/50/" alt="HTML" class="right"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

來源

2017-10-07 10:52:43

而不是使用$（this）.toggleClass（'right'）; '和$（this）.toggleClass（'left'）;'你可以簡單地寫'$（this）.toggleClass（'right left'）;'。 –

@AhmadMaleki是的你是對的，它已更新。我只是做了第一個複製粘貼沒有做優化:) –

-1

是你尋找這樣的：fiddle example。

<script> 
    function changeLeft() { 
     var left = document.getElementById("right").className = "left"; 
    } 
</script>

要找changeLeft當點擊功能的這樣一類的元素會變爲右：

來源

2017-10-07 10:51:19 pinturic

更改多個CSS類與JS

回答

相關問題