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

Question

我想使用 JavaScript 根据查询字符串使我的文本区域字体系列、字体大小、颜色有所不同。我不是 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