0

我需要在一个特定页面中居中特定元素。如果我尝试使用这样的 CSS：

#returning_user_search_box {
    position:absolute !important;
    width:50% !important;
    height:300px !important;
    left:0 !important;
    right:0 !important;
    margin:auto !important;
}

根据我的需要，我的元素很好地居中。问题是我的元素也存在是其他一些不需要应用特定样式的页面。所以我尝试使用这样的javascript：

if (window.location.href.indexOf('specific_page.php') != -1) {
    var style = document.getElementById('returning_user_search_box').style;
    style.position     = 'absolute';
    style.right        = '0';
    style.left         = '0';
    style.width        = '50%';
    style.height       = '300px';
    style.margin       = 'auto';
}

但在这里我的元素没有居中我不知道为什么。我看了看是否可以添加“重要！” javascript中的属性，但似乎是不可能的。

我准确地说我无权访问页面的 html，因为它位于不受我控制的远程服务器上。我只能与 JS 或 CSS 交互。

4

2 回答 2

0

您可以修改您的 css 选择器以包含特定于页面的父选择器：

body.onlyTheRequiredPages #returning_user_search_box { ... }

您还可以创建另一个选择器来重置您的元素样式：

.specific-page-el {
  position : absolute
  right    : '0'
  ...
}

并通过javascript修改该元素的类

if (window.location.href.indexOf('specific_page.php') != -1) {
  document.getElementById('returning_user_search_box').className = "specific-page-el"
}
于 2013-10-31T00:47:10.750 回答
0

或者你可以这样：

简单的 HTML：

<div id='container'>
    <span>
        Hello World
    </span>
</div>

简单的 CSS：

div#container
{
    background-color:#900!important; //Red color here. JS will change it to Blue.
}

简单的JS：

document.getElementById('container').setAttribute("style","background-color:#009!important;");

但是内联样式是最糟糕的事情。

链接到jsFiddle。

或者像这样使用不同的JS 。

style=document.getElementById('container').style;
style.setProperty("background-color","#009","!important;");
于 2013-10-31T01:03:25.337 回答