如何使用javascript添加基于类名的查询字符串

我想让我的textarea字体系列、字体大小、颜色根据javascript的查询字符串而有所不同。我不是javascript专家。我希望任何人都能帮助我

示例URL：

因此，它必须生成css，如：

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

---

使用javascript或jquery似乎不可能做到这一点吗？

尽管这是一个看似简单的问题，但在javascript中访问查询字符串值并不直接。有关如何访问它们的许多答案，请参见此问题：

在下一部分中，我将假设您正在使用PHP，并在某个地方添加以下内容，以便轻松访问查询字符串。您可以根据希望获得查询参数值访问权限的任何方法来更改此设置

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

另外，请注意您的URL格式不正确。应该是

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

不是

---

由于您没有在查询字符串中使用有效的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);

希望这能有所帮助

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

函数getQueryString（）{ var query_string={}； var query=window.location.search.substring（1）； var vars=query.split（&）；

---

对于（var i=0；i可能的重复项不是有效的查询字符串，它有三个

？

？考虑到上下文，使用

#

URI片段更有意义-样式与后端代码没有任何关系，也不应该有任何关系。通过这种方式，您可以更灵活地设计想要序列化数据的任何格式。好的观点我认为t-URL片段绝对是一个很好的选择。非常感谢Joel

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

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