0

特定の要素を 1 つの特定のページの中央に配置する必要があります。このような 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 に答える