从javascript更改伪元素样式

问题描述

如何更改CSS的伪元素样式?

How I can change CSS for a pseudo element style?

我正在尝试获取CSS before::规则，并将left:更改为95%或4px.如何在我的上下文中执行此操作?

I am trying to get the CSS before:: rule and change left: to 95% or 4px.How can I perform this in my context?

我还使用document.querySelector进行了一些测试，但是它不起作用，出现了计算只读错误.

I've also made some test using document.querySelector but it doesn't work, I get a compute Read-Only error.

您有建议吗?

css

.iziToast-wrapper-bottomLeft .iziToast.iziToast-balloon:before {
  border-right: 15px solid transparent;
  border-left: 0 solid transparent;
  right: auto;
  left: 8px;
}

js

    if(description_iziToast){
        let RightMode = event.x>window.innerWidth/2;
        let bubblePosition = document.getElementsByClassName("iziToast-balloon")[0]; // get the div that hold the bubble
        let ajustScreenLR = RightMode && document.getElementsByClassName("iziToast")[0].offsetWidth || 0; // halfScreen ajustement
        //bubblePosition.style.left = RightMode && '95%' || '4px'; // here i need to change the position in the befor:: attribut
        description_iziToast.style.left = `${event.x-20-ajustScreenLR}px`;
        description_iziToast.style.top = `${event.y-105}px`;
    }
    }else{
        if(description_iziToast){ iziToast.destroy(); description_iziToast = false; };
    }

在这里调试应用控制台

推荐答案

由于DOM中不存在伪元素，因此无法使用Javascript访问它们.解决方法是创建一个<span>而不是使用:before，并且必须应用相同的逻辑.

Since pseudo-elements do not exist in the DOM, they cannot be accessed in Javascript.The workaround is to create a <span> instead of using :before and the same logic has to be applied.

这篇关于从javascript更改伪元素样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！