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

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

的HTML输出是

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


我一直试图更改底部和左侧位置。

当我用萤火虫检查时,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");


和其他变体

没事

我真的很努力,只是尝试更改弹出窗口的元素样式。

谢谢你的帮助

最佳答案

样式属性中的内容比任何规则集都更specific,因此它将始终排在级联的最后并被应用。

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

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

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

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

您需要.lpopup.zoom来匹配两个类的成员的元素。

关于javascript - 如何样式类元素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/17678113/

10-13 01:55
查看更多