javascriptを使ってCSSクラスのスタイルを変更するには？

Question

例えば、私は今、私はどのように私べき、display:blockにCSSクラスabcのスタイルを変更したいと思い、この

.abc{display:none} 

のようなCSSスタイルシートを使用してこの

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

のような一部のHTMLコードを持っていますそれ？

Answer 1

DOM内の要素を検索し、el.classList.remove("abc")を使用して.abcクラスを削除します。要素を見つける方法

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

？

Answer 2

https://www.w3schools.com/js/js_htmldom_elements.asp「非表示にしたり、持っていれば

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

Answer 3

を表示する

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

使用簡単なjqueryのを使用して、インポートjQueryライブラリ.A BC 'クラス：使用すると、1つのより多く持っている場合

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>