如何添加基於類名稱的查詢字符串使用javascript

我想使我的textarea字體家族，字體大小，顏色不同基於查詢字符串與JavaScript。我不是一位JavaScript專家。我希望任何能夠幫助我的人。如何添加基於類名稱的查詢字符串使用javascript

示例URL：http://www.domain.com/?color=#000&size=32px&fontfamily=serif

所以它必須生成CSS，如：

textarea {font-family:serif;font-size:32px;color:#000}

是，似乎imposibble使用javascript或jquery的呢？

來源

2014-01-12 David hosanna

可能重複[如何在JavaScript中獲取查詢字符串值？]（http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in- javascript） –

這不是一個有效的querystring，它有三個'？'？ – adeneo

雖然這是一個看似簡單的問題 - 在javascript中訪問查詢字符串值並不直接。看到這個問題的許多答案如何訪問它們：How can I get query string values in JavaScript?

對於接下來的一部分，我將基於假設你正在使用PHP，並有以下添加的地方，以便輕鬆訪問查詢字符串。你可以根據你喜歡的任何方法來改變它來訪問查詢參數值。

<script>window.$_GET = <?php echo json_encode($_GET); ?>;</script>

這個問題的下一部分是如何從這些查詢參數創建css規則。還有另一個堆棧溢出問題也可以回答這個問題：How to dynamically create CSS class in JavaScript and apply?

使用接受答案中的方法，這裏有你的代碼 - 未經測試，因此可能會有一些小錯別字。

var css = 'textarea {'; 
if ('font' in $_GET) css += 'font-family:'+$_GET.font+';'; 
if ('size' in $_GET) css += 'font-size:'+$_GET.size+';'; 
if ('color' in $_GET) css += 'color:'+$_GET.color+';'; 
css += '}'; 

var style = document.createElement('style'); 
style.type = 'text/css'; 
style.innerHTML = css; 
document.getElementsByTagName('head')[0].appendChild(style);

另外，請注意您的網址格式不正確。它應該是

http://www.domain.com/?color=#000&size=32px&fontfamily=serif

不

http://www.domain.com/?color=#000?size=32px?fontfamily=serif

來源

2014-01-12 11:26:17

考慮到上下文，使用'#' URI片段更有意義 - 樣式不會，也不應該與後端代碼有任何關係。通過這種方式，您可以更靈活地設計您想要將數據序列化的任何格式。 – Emissary

好點 - URL片段絕對是我認爲的一個很好的選擇。 –

非常感謝你Joel –

如果你還沒有在你的查詢字符串使用有效的CSS屬性，它甚至不是一個有效的查詢字符串，你必須先更改查詢字符串鍵/值對與&而不是?分開，然後使用地圖來獲取正確的CSS屬性。

一旦做到這一點，它只是一個分離該鍵/值對，並遍歷元素應用樣式

var cssMap = { 
    color: 'color', 
    size : 'fontSize', 
    fontfamily : 'fontFamily' 
} 

function applyCSS(selector, qs) { 
    var props = qs.split('&'), 
     elems = document.querySelectorAll(selector), 
     styles = {}; 

    for (var i=props.length; i--;) { 
     var parts = props[i].split('='); 
     styles[cssMap[parts[0]]] = parts[1]; 
    } 

    for (var j=elems.length; j--;) { 
     for (var style in styles) { 
      elems[j].style[style] = styles[style]; 
     } 
    } 
    return styles; 
} 

applyCSS('textarea', window.location.search);

FIDDLE

來源

2014-01-12 11:35:11 adeneo

這一個也工作，感謝adeneo –

希望這有助於的事。

function getQueryString() { 
      var query_string = {}; 
      var query = window.location.search.substring(1); 
      var vars = query.split("&"); 
      for (var i=0;i<vars.length;i++) { 
       var pair = vars[i].split("="); 
       if (typeof query_string[pair[0]] === "undefined") { 
        query_string[pair[0]] = pair[1]; 
       } else if (typeof query_string[pair[0]] === "string") { 
        var arr = [ query_string[pair[0]], pair[1] ]; 
        query_string[pair[0]] = arr; 
       } else { 
        query_string[pair[0]].push(pair[1]); 
       } 
      } 
      return query_string; 
     } 
var queryString = getQueryString(); 
var sColor = queryString.color; 
var sSize = queryString.size; 
var sFont = queryString.fontfamily; 


var textAreaList = document.getElementsByTagName("textarea"); 

for(var i=0; i < textAreaList.length; i++){ 
    var el = textAreaList[i]; 
    el.style.color = sColor; 
    el.style.fontSize = sSize; 
    el.style.fontFamily = sFont; 
}

來源

2014-01-12 11:44:25

如何添加基於類名稱的查詢字符串使用javascript

回答

相關問題