js動的にclassスタイルを追加する学習について

テキストリンク:https://blog.csdn.net/qq_39125684/article/details/80198773
元サイト:https://blog.csdn.net/qq_39125684/article/details/80198773 
もし、私のところに需要があるなら.次のページコード

2016            ，    ，            ，            。                       ，                 。     ， Twin Peaks               ，                 。   30  ，                ，    ，    ，        。    ，             。     ，          ，    。

私は今、「赤」のボタンをクリックするときに、下のラベルにいくつかのスタイルを設定して、jsコードで実現することができます.

window.onload = function(){
	var oBtn1 = document.getElementById("btn1");
	var oP = document.getElementById("p1");
	
	oBtn1.onclick = function(){
	  oP.style.width = '300px';
		oP.style.background = 'red';
		oP.style.color = 'yellow';
		oP.style.border = '10px #ccc solid';
		oP.style.padding = '20px';
	}; 
};

これで完全に要求を実現できますが、もし私が要求したスタイルがもっと多かったら?このように書くのはとても煩わしいのではないでしょうか.
では、cssスタイルのclassを定義して、classを動的に追加することで、ボタンをクリックしてスタイルを変える需要を実現することができますか?
間違いなく、もちろんです.
しかし、動的にclassを追加するには書き方に注意する必要があります.classはjsの保留字なので、直接使用することはできません.classNameで動的にclassを追加するには
class  ==>   className
oP.class = 'red'; -- 間違いoP.className='red';
--jsで実現したばかりの機能をclassを動的に追加する方法で実現します.

window.onload = function(){
	var oBtn1 = document.getElementById("btn1");
	var oP = document.getElementById("p1");
	
	oBtn1.onclick = function(){
		oP.className = 'red';
	}; 
	
};