动态使用JavaScript的伪元素CSS [英] Pseudo-element CSS dynamically using JavaScript

问题描述

是否可以动态设置伪元素的CSS？例如：

jQuery动态样式帮助容器

 <$ c $（$＃$ bwidth：windowWidth  -  xOffset，
height：windowHeight  -  yOffset，
bottom：-windowHeight， 
left：200 
}）; 
  

jQuery尝试设置帮助容器的内边框：

  $（'＃help：before'）。css（{
width：windowWidth  -  xOffset，
height：windowHeight  -  yOffset 
}）; 
  

上述CSS文件

  #help 
 {
 opacity：0.9; 
 filter：alpha（opacity = 90）; 
 -moz-opacity：0.9; 
 z-index：1000000; 
 bottom：-550px; 
 left：400px; 
背景颜色：＃808080; 
 border：5px虚线＃494949; 
 -webkit-border-radius：20px 20px 20px 20px; 
 -moz-border-radius：20px 20px 20px 20px; 
 border-radius：20px 20px 20px 20px; 
} 
 #help：在
之前{
 border：5px纯白色; 
内容：''; 
位置：绝对; 
 -webkit-border-radius：20px 20px 20px 20px; 
 -moz-border-radius：20px 20px 20px 20px; 
 border-radius：20px 20px 20px 20px; 
 
  

解决方案

您无法做到直接通过jQuery。

看看这个问题：

设置-css-pseudo-class-rules-from-javascript / 5077782＃5077782> @ Box9的答案可能是您应该真正使用的答案：

我把这个的小型图书馆扔在一起，因为我认为那里有
是在JS中处理样式表的有效用例。

Is it possible to set the CSS of a pseudo-element dynamically? For example:

jQuery dynamically styling help container

$('#help').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset,
    "bottom" : -windowHeight,
    "left" : 200
});

jQuery Attempt at setting the inner border of the help container:

$('#help:before').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset
});

CSS file for the above

#help
{
    opacity: 0.9;
    filter:alpha(opacity=90);   
    -moz-opacity: 0.9;          
    z-index: 1000000;
    bottom: -550px;
    left: 400px;
    background-color: #808080;
    border: 5px dashed #494949;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;        
}
#help:before 
{
    border: 5px solid white;
    content: '';
    position: absolute;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;          
}

解决方案

You can't do it directly through jQuery.

Look at this question: Setting CSS pseudo-class rules from JavaScript

@Box9's answer is probably the one you should actually use:

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS.

这篇关于动态使用JavaScript的伪元素CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！