如何使用javaScript在运行时设置HTML属性值？

Question

我想制作一个主题切换器。

我的想法是让许多锚元素（主题）一个div类含data-theme属性包含不同色板（a，b，c，d，e）。我想用用户单击链接时选择的data-theme替换每个页面的data-theme属性。我怎样才能使用JavaScript？

Answer 1

就像我做的绿色说，jquerymobile有主题辊工作。

但我认为，一个改变是没有必要的，因为你可以设置一个色板让我们说a，然后在每一个主题的变化，你只需要更换CSS，这样就没有必要修改HTML DOM .. 。

祝你好运！

Answer 2

我会推荐使用JQuery。然后你可以做这样的事情：

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

选择器允许你定位一个或许多不同的元素。

Answer 3

有几种方法。我要做到这一点使用jQuery，因为我懒惰:)

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

赦免的超长变量名，但希望它不仅仅是A/B/C更清晰一点。

编辑： 好了，我们的谈话后，你想要的是更多的东西像下面这样：附近的http://www.quirksmode.org/js/cookies.html底部

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); 
}); 

抓住代码并使用它作为一个起点设置和读取Cookie 。所以，现在你已经有了一个名为'主题'的cookie，你有几个选择。我确信首选的是使用您正在使用的后端语言读取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 4

您可以指定特定的小部件，并通过更改特定主题类更新自己的主题：

 
    //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/

这里是另一个答案我张贴关于这个：How to change theme dynamically in 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>标记的顺序。