在当前URL上更改css

时间:2012-08-17 06:36:59

标签: jquery css

我想在当前网址上更改我的div样式。

如果我在我的主页上。

div.layout-column.column-main.with-column-1.with-column-2{
width:790;
}

如果我在除了我的主页之外的其他页面上,所以我希望我的课程如此。

div.layout-column.column-main.with-column-1.with-column-2{
width:590;
}

我尝试了但是没有得到正确的输出。

if (window.location.href == 'http://easyapuestas.com/')
{
  // alert("hiiii");
document.write("<style>" +
"div.layout-column.column-main.with-column-1.with-column-2{" +
" width: 790px;" +
"}" +
"</style>");
}
if (window.location.href !== 'http://easyapuestas.com')
{
// alert(window.location.href);
   document.write("<style>" +
 "div.layout-column.column-main.with-column-1.with-column-2{" +
 " width: 590px;" +
 "}" +
 "</style>");
}

3 个答案:

答案 0 :(得分:1)

尝试这样的事情:

$(document).ready(function() { 
   var width = window.location.href == 'http://easyapuestas.com/' ? '790px' : '590px';
   $('div.layout-column.column-main.with-column-1.with-column-2').css('width', width);
});

答案 1 :(得分:0)

如果你给主页的body元素一个类或id,你应该能够在没有JS的样式表中做到这一点:

<body class="home">

然后:

div.layout-column.column-main.with-column-1.with-column-2{
   width:590px;
}

body.home div.layout-column.column-main.with-column-1.with-column-2{
   width:790px;
}

这是有效的,因为在主体没有类的页面上,只有第一个选择器匹配你的div,但是在主体的页面上>让类“home”两个选择器匹配你的div,在这种情况下,第一个被第二个覆盖。

答案 2 :(得分:0)

我认为您尝试使用此

检查主页以外的页面
if (window.location.href == 'http://easyapuestas.com/')

{

这是错误,最好使用split(url)函数将其拆分为“/”,它将返回一个数组。然后你可以检查该数组的元素数量,我认为你可以使用这个

var url=window.location.href == 'http://easyapuestas.com/';
var split_arr=url.split("/");

//现在你可以检查这个数组的数量,如果它大于3,那么它不是主页