用Javascript创建内联样式表

Question

嗨 我试图在页面的开头创建一个内联样式表，该样式表对我从URL中获取的内容做出反应。 我这样做是为了让我可以突出显示页面上的导航按钮。 有点像这里的www.myeg.net，但是他们有一个静态网站，而且要容易得多。

<script type="text/javascript">
function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

function getSecondPart(str) {
    return str.split('=')[1];
}

var site=getSecondPart(page);

var style = document.createElement("style");
style.innerHTML = ".nav_" + page + " { background-image:url('images/gradients/transparent_gradient.png');}";
document.body.appendChild(style);


}
</script>
</head>
<body>
<center><div><img width="960px" height="187.5" src="images/fullbanner.png"></div></center>
<div id="wrapper">
<div id="navbar">
<ul>
<li class="nav_index"><a href="index.php">Home</a></li>
<li class="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li class="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li class="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li class="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul>

我对javascript很了解，对不起;;;

Answer 1

尝试这个：

<style type="text/css">
#banner{text-align:center;}
#banner>img{width:960px;height:187.5px;}
#nav>.selected{background-image:url('images/gradients/transparent_gradient.png');}
</style>
</head>
<body>
<div id="banner"><img src="images/fullbanner.png"></div>
<div id="wrapper">
<div id="navbar">
<ul id="nav">
<li id="nav_index"><a href="index.php">Home</a></li>
<li id="nav_archive"><a href="index.php?site=news&action=archive">News</a></li>
<li id="nav_squads"><a href="index.php?site=squads">Roster</a></li>
<li id="nav_forum"><a href="index.php?site=forum">Forums</a></li>
<li id="nav_about"><a href="index.php?site=about">Contact</a></li>
</ul> 
<script type="text/javascript">
document.getElementById('nav_'+window.location.href.split('=')[1]).className='selected';
</script>

您不应该使用<center> ，它已被弃用！

您应该匹配一个类，然后仅使用javascript将该类添加到您的元素中，而不是使用javascript编写样式表来匹配一个元素。

而且我不太了解您的代码：

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

var page=parseUrl('').search

它给我"" ，但我从未见过.search上的搜索...如果要获取当前URL，可以执行window.location.href 。

还有一点：如果您使用var外部函数（在全局范围内），那么您正在创建一个全局变量，该变量不会被删除并占用内存。 然后，您可以在不想使用它时将其删除（ var a="dagjhdjgailghkagh";/*code*/;a=null; ），或使用包含代码的自执行函数（关闭）。

编辑：

抱歉，不是#nav>selected而是#nav>.selected 。

您可以在此处查看演示： http : //jsfiddle.net/VhWHp/

（但是该网址没有= ，因此我将其手动替换为“存档”。在您的网站中，删除该行）

是的，它先加载CSS，然后再加载导航。 但这就是CSS和javascript的真正威力：如果您在元素加载后将类设置为元素，则该元素将具有应用于该类的样式。

编辑2：

问题是，如果您执行split('=')[1] ，结果将类似于"news&action"而不是"news" 。

然后，您可以使用我前一段时间编写的函数：

function sQuery(arg) {
  if(window.location.search){
    var que = window.location.search.substring(1);
    if(arg=='string'){return que;}
    que = que.split("&");
    if(!arg||arg=='array'){return que;}
    for(var i=0;i<que.length;i++){
      var qvar = que[i].split("=");
      if(qvar[0]==arg){
        return qvar[1];
      }
    }
  }
  return false;
}

然后，像这样调用函数： sQuery('site')

document.getElementById('nav_'+(sQuery('site')||'index')).className='selected';

如果要获取["site=news","action=archive"]和sQuery('string') ，也可以调用sQuery('array')或sQuery('array') sQuery()如果您想获取["site=news","action=archive"] "site=news&action=archive" 。 如果您不使用它，则可以简化功能：

function sQuery(arg) {
  if(window.location.search){
    var que = window.location.search.substring(1).split("&");
    for(var i=0;i<que.length;i++){
      var qvar = que[i].split("=");
      if(qvar[0]==arg){
        return qvar[1];
      }
    }
  }
  return false;
}

用Javascript创建内联样式表

问题描述

1 个解决方案

解决方案1
0 2012-08-31 23:16:29

用Javascript创建内联样式表

问题描述

1 个解决方案

解决方案1 0 2012-08-31 23:16:29

解决方案1
0 2012-08-31 23:16:29