javascript - 如何设置类元素的样式？

Question

我的网站上有一个 js 库，它正在为我创建弹出窗口。

我正在尝试设置弹出窗口的样式，但没有任何效果。

html输出是

<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">

我一直在尝试的就是改变底部和左侧的位置。

当我用 fire bug 检查时，css 是

element.style {
  bottom: -6px;
  left: -54px;
  opacity: 1;
  transform: translate(435px, 200px);
}

我试过通过做来操纵css

.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
   bottom: 30px;
}

但它们都不起作用，我已经尝试了尽可能多的变体。

我也试过js

$(".lpopup zoom").css("bottom", "30px");

和其他变化

什么都没发生

我真的很努力只是想改变弹出窗口的元素样式。

感谢您的帮助

Answer 1

style属性中的内容更多specific然后是任何规则集，因此它总是在级联中排在最后并被应用。

干净的解决方案是:将初始 CSS 移出样式属性并移入样式表。然后在注意特异性的同时编写规则。

hacky 解决方案是:使用 the !important flag

真正令人讨厌的解决方案是:使用 JavaScript 更改样式属性(这正是您正在尝试的，但您的选择器有误)。

.lpopup zoom将匹配:<anything class="lpopup"><zoom> This element </zoom></anything>

你想要.lpopup.zoom它将匹配同时属于两个类的元素。