44. Класи, стилі, атрибути, координати

Класи:
elem.classList.add/remove("class") – додає/видаляє клас
elem.classList.toggle("class") – додає клас, якщо його немає, та видаляє - якщо є
elem.classList.contains("class") – перевіряє наявність класу, повертає true/false

Стилі і атрибути:
elem.style./назва стилю/ = /параметр стилю/ - встановлює один параметр стилю для елемента
elem.style./назва стилю/ = "" - видаляє стильову властивість
elem.style.cssText = `...` - додає кілька стильових властивостей списком взамін існуючих
elem.setAttribute('style', 'color: red...'). - додає кілька стильових властивостей списком через встановлення атрибуту
elem.removeAttribute('назва атр.'). - видаляє атрибут
getComputedStyle(element, [pseudo]) - дозволяє отримати значення атрибуту стилю

Координати:
pageYOffset - отримання відступу сторінки від верхнього краю (змінюється прокруткою)
pageХOffset - отримання відступу сторінки від лівого краю (змінюється прокруткою)
elem.getBoundingClientRect() - отримання координат (відносно вікна) елемента, для верху і низу елемента, для лівой і правой границі елементу, а також ширини та висоти елементу

Приклади

elem.classList.add/remove("class") - додає/видаляє клас

Додаємо та видаляемо класс в якому прописаний жовтий background

#block1

btn1.onclick = function (){
       block1.classList.add("yellow_block");	
	};
btn2.onclick = function (){
      block1.classList.remove("yellow_block");	
	};

elem.classList.toggle("class") – додає клас, якщо його немає, та видаляє, якщо є

#block2 => клікай

block2.onclick = function (){
      this.classList.toggle("yellow_block");	
	};

elem.classList.contains("class") – перевіряє наявність класу, повертає true/false

#block3 => клікай

block3.onclick = function (){
      this.classList.toggle("yellow_block");
     var class_tf = this.classList.contains("yellow_block");
     
 	this.textContent =class_tf;
	};

elem.style./назва стилю/ = /параметр стилю/ - встановлює один параметр стилю для елемента

#block4 => клікай

Велика літера в назві стилю означає "-" і маленьку літеру разом: "backgroundColor" => "backgrount-color"

block4.onclick = function (){
     this.style.backgroundColor = "orange";
	};

elem.style./назва стилю/ = "" - видаляє стильову властивість

#block5 => клікай

block5.onclick = function (){
     this.style.backgroundColor = "";
	};

style.cssText - додає кілька стильових властивостей списком взамін існуючих

#block6 => клікай

Зверніть увагу на лапки - ``, працюють тільки такі

   block6.onclick = function (){
          this.style.cssText=`color: red !important;
                             background-color: yellow;
                             width: 200px;`
	};

elem.setAttribute('style', 'color: red...') - додає кілька стильових властивостей списком

#block7 => клікай

 block7.onclick = function (){
 	// властивості та параметри в один рядок
         this.setAttribute('style', 'color: red; background-color: lightblue');
	};

elem.removeAttribute() - видаляє атрибут

Input має атрибут size="50", видаляємо його

 bl7.onfocus = function (){
 	this.removeAttribute('size');
	};

getComputedStyle(element, [pseudo]) - дозволяє отримати значення атрибуту стилю

#block8 => клікай

Отримати параметр, який складається з кількох значень, наприклад, border: 3pх solid gray не вдасться

 block8.onclick = function (){
 	var elem=document.querySelector('#block8');
 	  var b = getComputedStyle(elem).width;
 	alert (b);
	};

pageYOffset - отримання відступу сторінки від верхнього краю

pageXOffset - отримання відступу сторінки від лівого краю

btn3.onclick = function (){
 	  alert ('pageYOffset= '+pageYOffset+ '\n pageXOffset= '+pageXOffset );
	};

elem.getBoundingClientRect() - отримання координат (відносно вікна) елемента, для верху і низу елемента, для лівой і правой границі елементу, а також ширини та висоти елементу

#block9 => клікай

block9.onclick = function (){
	var coord = this.getBoundingClientRect();
 	 this.innerHTML ="Координата Y: " +coord.y+"<br/> Координата X: " +coord.x;
 	 this.insertAdjacentHTML('beforeend', "<br/>Верх блоку top: " +coord.top);
 	 this.insertAdjacentHTML('beforeend', "<br/>Низ блоку bottom: " +coord.bottom);
 	 this.insertAdjacentHTML('beforeend', "<br/>Ліва сторона: left" +coord.left);
 	 this.insertAdjacentHTML('beforeend', "<br/>Права сторона right: " +coord.right);
 	  // ширина та висота елементу
 	 this.insertAdjacentHTML('beforeend', "<br/>Ширина блоку  width: " +coord.width); 
 	 this.insertAdjacentHTML('beforeend', "<br/>Висота блоку height: " +coord.height);
 	  
	};

абсолютні координати

#block10 => клікай

block10.onclick = function (){
	var coord = this.getBoundingClientRect();
	
	var absc_y=pageYOffset+coord.y;
	var absc_x=pageXOffset+coord.x;
	
	 	 this.innerHTML ="Координата Y: " +absc_y+"<br/> Координата X: " +absc_x;
 	 };

далі ✏