операции в стиле HTML5-ClassList

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <META кодировка = "UTF-8"> 
    <title> Название </ title> 
    <стиль> 
        .red { 
            цвет: красный 
        } 
        .green { 
            цвет: зеленый ; 
        } 
        .Blue { 
            цвет: синий; 
        } 
        .Underline { 
            текст-отделка: подчеркнуть; 
        } 
    </ Стиль> 
</ HEAD> 
<BODY> 
<UL> 
    <LI класс = "красный">前端与移动开发</ li> 
    <литий класс = "синий"> ява </ li> 
    <li>
<Входной тип = «кнопка» значение = « стилю в качестве первого элемента Li» ID = «надстроек»> 
<входной тип = «кнопка» значение = « стиль для удаления второго элемента Li» ID = «удалить» > 
<тип входного = "Кнопка" значение = "стиль третьего переключения литий элемент" ID = "переключение"> 
<INPUT TYPE = значение "Button" = "Анализ четвертого элемента Li содержит стиль" ID = "содержать"> 
<Script> 
    window.onload = функция () { 
        / * надстроек :. Добавьте указанное имя может только добавить шаблон элемента стиля * / 
        document.querySelector ( "Добавить в #") , то OnClick = функция (). { 
            / * ClassList: стиль списка всех текущего элемента - массив * / 
            document.querySelector ( "Ли") classList.add ( "Красный") ;. 
            document.querySelector ( "Ли") classList.add ( "подчеркивание"). ;
            //document.querySelector("li").className="red подчеркнуть» 
            / * получить стиль * /
            . Вар document.querySelector Результат = ( "Ли") classList.item (2); 
            console.log (Result); 
        } 

        / * Удалить: удаление именованного стиля для элемента (атрибут класса не удаляется), только один раз съемный * / 
        document.querySelector ( "# убрать") , то OnClick = функция () {. 
            document.querySelector ( "Голубой") . classList.remove ( "Синий") ;. 
        } 

        / * переключение: стили переключающего элемента Если вы не указали имя элементы стиля добавлены ранее. Если затем удаляется * / 
        {. Document.querySelector ( "# Переключение") , то OnClick = функция () 
            document.querySelectorAll ( "Ли") [2] .classList.toggle ( "зеленый"); 
        } 

        / * класс содержит: анализ элемент содержит имя стиля указанного, возвращается истина / ложному * / 
        document.querySelector ( «# содержит»). в OnClick = функция () {
            вар isContain = document.querySelectorAll ( "Ли") [3] .classList.contains ( "красный"); 
            console.log (isContain); 
        } 
    } 
</ SCRIPT>
</ body> 
</ html>
операции в стиле HTML5-ClassList

рекомендация
