Как посмотреть название class с помощью js

81
19 апреля 2021, 11:30

Как возможно скопировать в переменную название класса пренадлежащего body.

Нашел вот такое решение но оно возвращает:

[object HTMLBodyElement]

window.onscroll = function() {
var BlockName = document.querySelector("body");

Вот так выглядит HTML

<body class="fp-viewing-whatWeDo-0" style="overflow: visible; height: initial;">

Скопировать необходимо fp-viewing-whatWeDo-0.

Answer 1

Ну да... запросили HTML-элемент, получили HTML-элемент))
В хроме, если записать console.dir( element ) можно еще в консоли посмотреть все свойства этого элемента. Правый клик на странице, в открывшемся меню - Inspect:

( можно проверить тут → https://jsfiddle.net/OPTlMUS/54nf86mz/ )

А значения всех этих свойств можно достать через "точку". .className возвращает строку, а .classList - массив. Хотя className == classList.value

var body = document.querySelector("body"); 
 
console.log( body.className ); 
 
console.log( body.classList[0] ); 
console.log( body.classList[1] ); 
console.log( body.classList.value );
<body class="fp-viewing-whatWeDo-0 test-class"></body>

P.s. .getAttribute('class') vs .className — разница в том, что первое достаёт то, что реально написано в атрибуте в HTML-коде в момент запроса... а второе - то, что содержится в JS-свойстве. В данном случае нет разницы, т.к. при смене класса, изменения происходят и тут, и там. А в других случаях идет рассинхрон - в атрибуте может быть одно, а в JS - другое ( например .onclick vs getAttribute('onclick') )

P.s.-2 body же не создаётся динамически... Поэтому вместо того, чтобы при скролле каждый раз пересоздавать переменную и искать body, можно так:

var bodyClass = document.querySelector("body").className;
window.onscroll = function() { 
  console.log( bodyClass );
}
Answer 2

Попробуйте использовать специальное свойство classList:

document.querySelector("body").classList
Answer 3

Решение: 

let a = document.body.className;
READ ALSO
Почему clientWidth выдает неверное значение?
javascript

Почему clientWidth выдает неверное значение?

Файл подключен в шапке:

 107
Вынес JS код в отдельный файл. Тормозит
javascript

Вынес JS код в отдельный файл. Тормозит

Есть небольшой скрипт на сайтетак вот я давно его писал и поэтому оно написано как попало

 98
Переключатели на JS
javascript

Переключатели на JS

 102
pug mixin input type
javascript

pug mixin input type

Если нет значения аргумента type, то делать просто input text, если есть, то присваивать в зависимости от аргумента

 109