Question

我想根据查询字符串使用javascript使我的textarea字体系列，字体大小，颜色不同。我不是一个JavaScript专家。我希望有人能帮助我。

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

所以它必须生成css，如：

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

这似乎是使用javascript或jquery完成的吗？

Answer 1

虽然这是一个看似简单的问题 - 在javascript中访问查询字符串值并不是直截了当的。有关如何访问它们的许多答案，请参阅此问题：How can I get query string values in JavaScript?

对于下一部分，我将基于您使用PHP的假设开始工作，并在某处添加以下内容以便于访问查询字符串。您可以根据您希望获得查询参数值的任何方法来更改此值。

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

此问题的下一部分是如何从这些查询参数创建css规则。还有另一个Stack Overflow问题回答了这个问题：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

Answer 2

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

Answer 3

希望这有帮助。

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

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

3 个答案: