Javascript/element.setAttribute()

解説 指定の要素に新しい属性を追加、または指定の要素に存在する属性の値を変更。
sample1
s1Div
sample1Code
var s1Div = document.getElementById("s1Div");
s1Div.setAttribute("class", "s1Class");
console.log(s1Div.className);
sample2
s2Div
sample2code
var s2Div = document.getElementById("s2Div");
var s2Offset = $(s2Div).offset().top;
document.addEventListener("scroll", function(){
  if(window.pageYOffset > s2Offset){
    s2Div.setAttribute('class', 's2Class')
  } else {
  	s2Div.setAttribute("class", "");
  }
});
	
sample3
sample3code
function s3Func(){
  var s3Btn = document.getElementById("s3Btn");
  s3Btn.setAttribute("type", "checkbox");
}
	
sample4
sample4code
const s4Text = document.getElementById("s4Text");
const s4Btn = document.getElementById("s4Btn");
const s4Div = document.getElementById("s4Div");
s4Btn.addEventListener("click", function(){
  var stVal = s4Text.value;
  nCheck = document.createElement("input");
  nCheck.setAttribute("type", "checkbox");
  var label = document.createElement("label");
  label.appendChild(nCheck);
  nCheck.after(stVal);
  s4Div.appendChild(label);
  label.style.display = "block";
});
	
sample5
sample5code
const s5Text = document.getElementById("s5Text");
var s5Time;
s5Text.addEventListener("keydown", function(){
  s5Text.setAttribute("type", "text");
  clearTimeout(s5Time);
});
s5Text.addEventListener("keyup", function(){
  s5Time = setTimeout(function(){
  	s5Text.setAttribute("type", "password")
  }, 3000);
});
	
sample6
sample6code
const s6Check = document.getElementById("s6Check");
s6Check.addEventListener("click", function(){
  let s6Pass = document.getElementById("s6Pass");
  if(s6Check.checked == true){
  	s6Pass.setAttribute("type", "text");
  } else {
  	s6Pass.setAttribute("type", "password");
  }
});