当使用查询字符串时，我如何应用css

How can i apply css when a query string is used?

本文关键字：何应用 应用 css 查询 字符串      更新时间：2023-10-25

我想做的是（在正文末尾）检查查询字符串，并根据它的内容应用css。

www.example.com什么都不做

www.example.com/example--location/example.html？主题=红色将添加"红色"css

www.example.com/example-path/example2.html？主题=黄色将通过"黄色"css

此外，如果可能的话，当他们点击链接/选项卡时，我需要主题跟随他们到我网站上的其他URL。

使用Javascript函数检索qs参数window.location.search，然后解析它们以检查您想要的参数是否存在，然后使用getElementById更改HTML中的样式表引用。

您至少需要JavaScript。

首先，您需要一个可以读取URL中变量的函数：

function getQueryVariable(variable) {
   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(pair[0] == variable){
          return pair[1];}
      }
   return(false);
}

现在假设您想要更改id为element1的元素的css

if(getQueryVariable("theme") == "red") {
    document.getElementById("element1").className = "redClass";
} elseif(getQueryVariable("theme") == "yellow") {
    document.getElementById("element1").className = "yellowClass";
}

当然，您需要首先创建css类（在本例中为redClass和yelloClass），但这几乎就是它的工作方式。

编辑：根据OP的要求，这里有一个工作演示。JsFiddle显然不喜欢GET参数，所以只需将其复制到html文件中，自己尝试一下。?theme=red将使文本变为红色。?theme=yellow将使文本变成黄色。

<style>
.redClass {
    color: red;
}
.yellowClass {
    color: yellow;
}
</style>
<div id="element1">This is a test</div>
<script>
function getQueryVariable(variable) {
   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(pair[0] == variable){
          return pair[1];}
      }
   return(false);
}
if(getQueryVariable("theme") == "red") {
    document.getElementById("element1").className = "redClass";
} else if(getQueryVariable("theme") == "yellow") {
    document.getElementById("element1").className = "yellowClass";
}
</script>

您需要一个函数来解析location.search属性中的URL参数（查询字符串）；然后，一旦有了参数，就将该类应用于<body>标记。

function getUrlParameters() {
  var params = {};
  if (location.search) {
    var parts = location.search.substring(1).split('&');
    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
  }
  return params;
}
$(document).ready(function() {
  var theme = getUrlParameters().theme;
  if (theme)
    $("body").addClass(theme);
});
相关文章：