将相同的 css class 属性更改为 javascript

Question

我在多个页面中有相同的 class。我可以控制 css，通过它我可以更改 css 的属性。

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

我想在一页中制作 top:70px 其余页面我想要 top:0

有什么方法可以通过一页上的 JavaScript 来控制吗？

Answer 1

在您的 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 2

假设您正在使用两个页面：

main.html
sub1.html
sub2.html

在 main.html 中，对于 <body> 给出一个 class 比如：

<body class="main">

对于两个子页面，使用：

<body class="sub">

然后像这样给出 CSS：

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

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。

这是解决您的问题的可能 'proper' CSS 方法之一。但是，如果您无法编辑标记，请查看是否可以使用任何级联挂钩（如 Praveen 的回答） - 否则您可能必须使用 JS，假设您至少可以控制每个页面上的 loaded/executed .请记住，由于在呈现 dom 并应用 css 之后可能会应用您的 js，因此某些 FOUC（无样式内容的闪烁）可能会导致此类更改。

将相同的 css class 属性更改为 javascript

Change the same css class property through javascript

html

javascript

css

jquery

target

将相同的 css class 属性 更改为 javascript

Change the same css class property through javascript

html

javascript

css

jquery

target

将相同的 css class 属性更改为 javascript