使用xml中包含的樣式表將樣式應用於html頁面

-1

我試圖創建一個使用哪個用戶可以通過單擊按鈕來更改網站主題的主題切換器。我不想使用本地存儲或Cookie。我正在嘗試使用xml來做到這一點。我可以將樣式表附加到xml文件並運行html。但是這會強制xml文件中的樣式更改。 html頁面不會更改。我如何去做。請幫忙。使用xml中包含的樣式表將樣式應用於html頁面

<html> 
<body> 
    <h3>Populate Data from XML file using Jquery</h3> 
    <input id="btnGetData" type="button" value="Populate Data from XML File" /> 
    <div id="UpdatePanel" style="padding:20px 10px"> 
     <form action="datacheck.xml"> 
      <input type="submit" value="blue"> 
     </form> 
     <form action="datacheck1.xml"> 
      <input type="submit" value="red"> 
     </form> 
     <form action="datacheck2.xml"> 
      <input type="submit" value="green"> 
     </form> 
    </div> 
</body> 
<script src="jquery-1.11.1.min.js"></script> 
<script language="javascript" type="text/javascript"> 
    $(document).ready(function() { 
     $("#btnGetData").click(function() { 
      $("#UpdatePanel").html("Please wait..."); 
      $.ajax({ 
       url: "datacheck.xml", 
    url:"datacheck1.xml", 
       type: "GET", 
       dataType: "xml", 
       success: OnSuccess, 
       error: OnError 
      }); 
     }); 
    }); 

    function OnSuccess(xml) { 
     var tableContent = " 
       <table border='1' cellspacing='0' cellpadding='5'>" + 
          " 
        <tr>" + 
           " 
         <th>TITLE</th>" + 
           " 
         <th>ARTIST</th>" + 
           " 
         <th>COUNTRY</th>" + 
           " 
         <th>COMPANY</th>" + 
           " 
         <th>PRICE</th>" + 
           " 
         <th>YEAR</th>" + 
          " 
        </tr>"; 
     $(xml).find('CD').each(function() { 
      tableContent += " 
        <tr>" + 
           " 
         <td>" + $(this).find('TITLE').text() + "</td>" + 
           " 
         <td>" + $(this).find('ARTIST').text() + "</td>" + 
           " 
         <td>" + $(this).find('COUNTRY').text() + "</td>" + 
           " 
         <td>" + $(this).find('COMPANY').text() + "</td>" + 
           " 
         <td>" + $(this).find('PRICE').text() + "</td>" + 
           " 
         <td>" + $(this).find('YEAR').text() + "</td>" + 
          " 
        </tr>"; 
     }); 
     tableContent += " 
       </table>"; 
     $("#UpdatePanel").html(tableContent); 
    } 

    function OnError(data) { 
     $("#UpdatePanel").html("Error! Please try again."); 
    } 



</script>

來源

2015-04-15 Pratz09

使用jQuery和CSS改變鏈接到其他主題文件。或者更好的是，展示你迄今爲止的代碼。 – Justinas

這就是我所做的。我已將3個css文件附加到3個不同的xml文件（<？xml-stylesheet href =「style2.css」type =「text/css」？>）並創建了3個按鈕。因此，如果我運行html頁面並單擊任何按鈕，xss中的css被強制更改。 html中的樣式沒有改變 – Pratz09

您正在加載XML，獲取它的內容，但沒有樣式。你必須改變當前頁面的CSS鏈接。 – Justinas

您正在加載XML內容，而不是它的CSS。若要更改HTML CSS，你必須動態地更改文件的來源：

$(document).ready(function() { 
 
    $('.btn').click(function() { 
 
    $('#style').attr('href', $(this).data('url')) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" id="style"> 
 
<div class="wrapper"> 
 
    <div class="btn btn-success" data-url="https://bootswatch.com/cerulean/bootstrap.min.css">style 1</div> 
 
    <div class="btn btn-primary" data-url="https://bootswatch.com/slate/bootstrap.min.css">style 2</div> 
 
</div>

來源

2015-04-15 06:55:57 Justinas

使用xml中包含的樣式表將樣式應用於html頁面

回答

相關問題