BLOGTOP

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » BLOGTOP » Уголок wap мастера » JavaScript » Как добавить имя класса к элементу с помощью JavaScript


Как добавить имя класса к элементу с помощью JavaScript

Сообщений 1 страница 1 из 1

1

[html]<button onclick="myFunction()">Добавить клас</button>

<div id="myDIV">
  Нажмите кнопку, чтобы добавить класс ко мне!
</div>
<style>
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}
</style>
<script>
function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.add("mystyle");
}
</script>
[/html]

Шаг 1) добавить HTML:
Добавьте имя класса в элемент div с идентификатором = "myDIV" (в этом примере мы используем кнопку для добавления класса).

Код:
<button onclick="myFunction()">Try it</button>

<div id="myDIV">
  This is a DIV element.
</div>

Шаг 2) добавить CSS:
Стиль указанное имя класса:

Код:
.mystyle {
    width: 100%;
    padding: 25px;
    background-color: coral;
    color: white;
    font-size: 25px;
}

Шаг 3) добавить JavaScript:
Получите элемент <div> с идентификатором = "myDIV" и добавьте в него класс "myStyle":

Код:
function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.add("mystyle");
}

Кросс-браузерное решение

Примечание: Свойство класслист не поддерживается в обозревателе Internet Explorer 9. Следующий код будет работать во всех браузерах:

Код:
function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}
Подпись автора

вопрос по ◆ВТ◆ в личку

вопрос по ◆ВТ◆ в тему

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


упс таблица

Откуда гость?
ВНИМАНИЕ! В подписи запрещены ссылки на конкурирующие сайты или форумы!


Вы здесь » BLOGTOP » Уголок wap мастера » JavaScript » Как добавить имя класса к элементу с помощью JavaScript