时间戳

首页 > 解决方案 > 无法更改：使用 JavaScript 悬停 CSS 属性

javascript - 无法更改：使用 JavaScript 悬停 CSS 属性

问题描述

背景： 我正在建立一个Wordpress网站，Elementor并希望使用 Javascript 来修改悬停属性。

我所做的： 基于此解决方案中的答案（更改：使用 JavaScript 悬停 CSS 属性），我已经能够让我的代码在 JSfiddle 中工作（https://jsfiddle.net/lindychen/hL60waqd/2/） .

问题： 但是，当我以以下方式将此代码导入我的 Wordpress 站点时，该代码对我的页面没有任何影响。这就是我在 Wordpress 中实现代码的方式。

<script type="text/javascript">
if (localStorage.getItem('trackerxyz') === 'page_m') {
var css = 'button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}';
var style = document.createElement('style');
 if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);
}
</script>

有人可以让我知道如何解决这个问题吗？谢谢。

标签： javascripthtmlcsswordpress

解决方案

您可以通过以下方式解决此问题：

if (localStorage.getItem('trackerxyz') === 'page_m') {

  var style = '<style>button.elementor-button.elementor-size-sm:hover{ background-color: #cc3633; color: #ffffff } button.elementor-button.elementor-size-sm {background-color: rgba(204,54,51,0.86); #ffffff}</style>';

  document.head.insertAdjacentHTML('beforeend', style);

}

所以不需要创建节点。参见MDN 上的 insertAdjacentHTML

推荐阅读