如何使用javascript更改CSS类的样式？

Question

例如，我有一些HTML代码这样

<div class="abc"></div> 

与CSS样式表这样

.abc{display:none} 

现在我想改变CSS类abc到display:block的风格，我应该如何做它？

Answer 1

在DOM中查找元素并使用el.classList.remove("abc")删除.abc类。

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

如何找到元素？

https://www.w3schools.com/js/js_htmldom_elements.asp

Answer 2

使用

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

使用简单的jQuery隐藏或显示

$(".abc").hide();//for display none 
$(".abc").show();//for display block 

Answer 3

，如果你有一个”进口jQuery库.A BC '类：

document.getElementsByClassName("abc")[0].style.display = "block"; 

如果你有更多的一个' 名为.abc”类：

var len = document.getElementsByClassName('abc'); 
for(i = 0; i < len.length; i++){ 
    len[i].style.display = 'block'; 
} 

Answer 4

你想真正改变CSS类的属性和值或只需更改应用于您的HTML元素的类？

在这种情况下，使用jQuery例如，你只需要做：

$('div').removeClass('abc').addClass('cba'); 

这将删除当前连接到你的div元素“ABC”类，并设置了“CBA”类此元素。

你的 'CBA' 类的定义为：

.cba{display: block} 

Answer 5

只需要用下面

$(".abc").show(); // to display block on css 
$(".abc").hide(); // to display none on css 

这里完整的代码简单的动作来实现你的问题

<!--html code--> 
<div class="abc">Hello World</div> 

<!--stlyling--> 
<style> 
    .abc{display:none} 
</style> 

<!--script--> 
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
    $(document).ready(function() { 
     $(".abc").show(); 
    }); 
</script> 

希望它能帮助

Answer 6

对于所有人说document.getElementsByClassName('abc').style.display = 'block';作品的人...

应该如何：

let e = document.getElementsByClassName('abc'); 
 
for(i = 0; i < e.length; i++){ 
 
    e[i].style.display = 'block'; 
 
}

.abc{display:none;}

<div class="abc">HI!</div> 
 
<div class="abc">You can see me!</div>

document.getElementsByClassName('abc').style.display = 'block';方法：

document.getElementsByClassName('abc').style.display = 'block';

.abc{display: none;}

<div class="abc">HI!</div> 
 
<div class="abc">You can see me!</div>