Как установить значения атрибутов HTML во время выполнения с помощью javaScript?

Question

Я хочу сделать Переключатель тем.

Моя идея состоит в том, чтобы создать класс div с множеством якорных элементов (тем), содержащих атрибут data-theme, содержащий различные образцы (a, * 1005).* * * 1006, d e).Я хочу заменить атрибут data-theme каждой страницы на data-theme, выбранный, когда пользователь щелкает ссылку.Как я могу сделать это с помощью JavaScript?

Answer 1

Вы можете настроить таргетинг на определенные виджеты и обновить их темы, изменив классы, относящиеся к теме:

    //set a theme letter to change to
    var theme = 'a';

    //update the button widgets on the current page
    $.mobile.activePage.find('.ui-btn').not('.ui-li-divider')
                       .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
                       .addClass('ui-btn-up-' + theme)
                       .attr('data-theme', theme);
    
    //update the list-divider elements
    $.mobile.activePage.find('.ui-li-divider').each(function (index, obj) {
        if ($(this).parent().attr('data-divider-theme') == 'undefined') {
            $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
                   .addClass('ui-bar-b')
                   .attr('data-theme', 'b');
        }
    })
                     
    //update the header, footer, and body  
    $.mobile.activePage.find('.ui-header, .ui-footer')
                       .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
                       .addClass('ui-bar-' + theme)
                       .attr('data-theme', theme);
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
                       .addClass('ui-body-' + theme)
                       .attr('data-theme', theme);

Вот ссылка на демонстрацию этого кода: http://jsfiddle.net/VNXb2/7/

Вот еще один ответ, который я написал по этому поводу: Как динамически изменить тему в jquery mobile?

Приведенный выше код предназначен для переключения темы после инициализации (вот почему все переключение классов), если вы хотите переключить тему до того, как среда jQuery Mobile инициализирует что-либо, вы можете использовать селектор атрибута, чтобы изменить все элементы в DOM:

//this will update any element with a `data-theme` attribute set so it's set to `a`
$('[data-theme]').attr('data-theme', 'a');

Если вы хотите, чтобы различные типы виджетов были разными темами, вы можете просто сделать селектор немного более конкретным:

//give all form inputs the `a` theme
$('input').attr('data-theme', 'a');

//give all the header elements the `a` theme
$('[data-role="header"]').attr('data-theme', 'a');

Вы можете принудительно выполнить перезагрузку, когда пользователь выберет образец, затем загрузить образец как переменную GET и прочитать эту переменную, когда страница загружается и до того, как в jQuery Mobile есть изменения для инициализации чего-либо:

<script src="jQuery-Core.js"></script>
<script>
//check if there are any GET variables
if (window.location.search != '') {
    var swatch = '',
        arr    = window.location.search.replace('?').split('&');

    //loop through the GET variable key/pairs
    for (var i = 0; len = arr.length; i < len; i++) {

        //split into key/pair
        var pair = arr[i].split('=');

        //check if the key is `swatch` and if so then set the `swatch` variable to its value
        if (pair[0] === 'swatch') {
            swatch = pair[1];
        }
    }

    //the `swatch` variable now holds the GET variable `swatch` if it was set
    if (swatch !== '') {
        $('[data-theme]').attr('data-theme', swatch);
    }
}
</script>
<script src="jQuery-Mobile.js"></script>

Обратите внимание на порядок тегов <script>.

Answer 2

Есть несколько способов. Я собираюсь сделать это с помощью jQuery, потому что я ленивый:)

var divThatCanHaveItsAttributesChanged = $("#divThatCanHaveItsAttributesChanged");
$("a.linkThatCanBeClickedToChangeTheme").on('click', function () {
    var linkThatWasClicked = $(this);
    divThatCanHaveItsAttributesChanged.attr('data-theme', linkThatWasClicked.attr('data-theme'));
});

Простите за супер длинные имена переменных, но, надеюсь, это немного понятнее, чем просто / b / c.

Edit: Хорошо, после нашего разговора вам нужно что-то вроде следующего:

var divThatCanHaveItsAttributesChanged = $("#divThatCanHaveItsAttributesChanged");
$("a.linkThatCanBeClickedToChangeTheme").on('click', function () {
    var linkThatWasClicked = $(this);
    var theme = linkThatWasClicked.attr('data-theme');
    divThatCanHaveItsAttributesChanged.attr('data-theme', theme);
    eraseCookie('theme');
    createCookie('theme', theme, 365);
});

Возьмите код в нижней части http://www.quirksmode.org/js/cookies.html и используйте его в качестве отправной точки для установки и чтения файлов cookie. Итак, теперь, когда у вас есть файл cookie с именем «theme», у вас есть несколько вариантов. Я уверен, что предпочтительным вариантом будет использование используемого вами языка бэкэнда для чтения файла cookie и изменения используемого вами шаблона. Например с PHP:

$theme = empty($_COOKIE['theme']) ? 'default-theme' : $_COOKIE['theme'];

И тогда вы можете использовать это, чтобы поместить «тему» ​​в правильное место. В качестве альтернативы, если у вас нет такой возможности, вы можете сделать это с помощью JavaScript.

$.ready(function () {
    var theme = readCookie('theme');
    //Either the cookie has expired or it doesn't exist
    if(!theme) {return;} 
    $("#divThatCanHaveItsAttributesChanged").attr('data-theme', theme);
});

Это может вызвать вспышку, хотя тема меняется. Существует огромное количество способов справиться с этим, но как минимум вы захотите установить этот файл cookie или отправить результат на сервер, чтобы присоединить его к учетной записи человека ... в зависимости от сложности.

Answer 3

Как и я, Грин говорит, что на jquerymobile работает ролик темы.

Но я думаю, что в изменении нет необходимости, потому что вы можете установить образец, скажем, a, а затем при каждом изменении темы вам нужно только заменить CSS, поэтому в этом случае нет необходимости изменять HTML DOM. ..

Удачи!

Answer 4

Я бы рекомендовал использовать JQuery .Затем вы можете сделать что-то вроде этого:

$('#selector').prop('data-theme') = 'newValue';

Селекторы позволяют вам настроить таргетинг на один или несколько различных элементов.