Question

我在多个页面中有同一个班级。而且我对css有一个控制，虽然我可以改变css的属性。

div.single-column div.middle {
    padding: 10px 20px;
    clear: both;
    position: relative;
    top: 70px;
}

在一个页面中，我想制作top:70px以及其他我想要的页面top:0

有什么方法可以通过JavaScript在一个页面上控制它吗？

Answer 1

假设您使用两个页面：

main.html
sub1.html
sub2.html

在main.html中，<body>给出类似的类：

<body class="main">

对于这两个子页面，请使用：

<body class="sub">

并给出这样的CSS：

.main .middle {top: 0px;}
.sub .middle {top: 70px;}

Answer 2

你的css中的

是默认的top : 0px;

div.single-column div.middle {
    padding: 10px 20px;
    clear: both;
    position: relative;
    top: 0px;
}

在您的页面中，您只需要top : 70px添加此页面

<style>
div.single-column div.middle {
    top: 70px !important;
}
<style>

Answer 3

这样的事情怎么样：

if(window.location.href == "URL"){
document.getElementsByTagName("Body").style.top = "100px";
}else{
document.getElementsByTagName("Body").style.top = "200px";
}

Answer 4

假设您可以编辑html：

div.single-column div.middle {
    padding: 10px 20px;
    clear: both;
    position: relative;
    top: 0; // default
}

div.single-column div.middle--alt {
    top: 70px;
} // modifier, a la BEM

在所有页面的标记中：

<div class="middle">...</div>

以及需要top: 70px的网页：

<div class="middle middle--alt">

如果您可以将选择器简化为.middle和.middle--alt那么好，但可能不是这样，因为我们不了解您的其他css。< / p>

这是可能的＆＃39;适当的＆＃39; CSS解决问题的方法。但是，如果你不能编辑标记，看看你是否可以使用任何级联钩子（比如Praveen的答案） - 否则你可能必须使用JS，假设你至少可以控制加载的内容/在每个页面上执行。请记住，这种变化可能会在某些FOUC（闪烁的无格式内容）中引起，因为在渲染dom并应用css后，你的js可能会被应用。

通过javascript更改相同的css类属性

4 个答案: