如何edit/overwrite javascript 中的小部件布局？

Question

我有一个 Wordpress 页面，并为空气质量测量设备添加了一个侧边栏小部件。设备生成的脚本是这样写的：

<div name="airvisual_widget" key="somecodehere"></div>
<script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script>

这会生成一个如下所示的小部件：

所以布局非常奇怪并且超出了限制，并且在生成该小部件代码的网站上并没有太多布局选项。是否可以覆盖或编辑此 javascript 代码中的标准布局？怎样才能做到这一点？

Answer 1

我确实看过小部件代码。并且能够使用 CSS.

更改布局

您可以为这些 class 添加 CSS 并使用 !important 覆盖小部件的现有属性

了解 dom 结构和 CSS 选择器后，您可以添加针对这些选择器的自定义 css。比如上面的截图，如果你想把div的高度改成class bodyAirvisualWidget，你可以添加自定义的CSS like

.bodyAirvisualWidget {
    height: 200px;
}

您可以选择添加 !important 来强制您的 css。但是您需要小心，因为相同的 css 选择器可能会针对多个元素。在这种情况下，您可能希望使 css 选择器更具体，例如 div.className > div.anotherClass > .bodyAirvisualWidget 以避免意外的副作用

如果它是一个简单的 html 页面，您可以直接在 <style> 标记或 CSS 文件中添加 CSS 并包含 css文件到您的页面。

如果是 Wordpress，您可以通过 Wordpress CSS 编辑器添加自定义 CSS（我的站点 → 设计 → 自定义 → 附加 CSS）

如何edit/overwrite javascript 中的小部件布局？

How to edit/overwrite the layout of a widget in javascript?

javascript

wordpress

widget