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

Question

我的网站上有一个 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");

和其他变体

虽然什么也没发生

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

谢谢你的帮助

score 1 · Accepted Answer

样式属性中的内容比任何规则集都更具体，因此它总是在级联中最后并被应用。

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

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

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

您想要.lpopup.zoom哪个将匹配作为两个类成员的元素。

score 0 · Accepted Answer

在您自己的页面中的写作风格将不起作用....

您只需打开弹出式 js 库并更改通过脚本添加的样式...

在 js 文件中自定义弹出设计是非常简单的方法......

score 0 · Accepted Answer

你需要.lolup.zoom { css here }.

抱歉，我没有像外星人先生那样完全理解这个问题。是的，内联样式将始终覆盖外部样式，因此您要么需要使用 !important （我会避免），要么尽可能删除内联样式。

score 0 · Accepted Answer

0

.lpopup{//css here} .zoom{//css here} 应该存在于您的 css 文件中。

于 2013-07-16T13:48:00.193 回答

4 回答 4