如何使用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>標記的順序。