属性使用js修改伪元素的值无效

时间:2018-04-05 15:42:37

标签: javascript jquery html css

我知道使用Javascript不可能在之前和之后直接修改伪元素,但是,如果我已经看到并验证了使用属性我们可以修改这些伪元素。

我的问题是尝试修改已创建元素的宽度会告诉我该值的属性无效并检查类型和值,宽度与我尝试传递的值完全相同。 / p>

.rombo .fusion-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100px;
  height: 0;
  border-right: rgba(12, 201, 232, 0.5);
  border-right-width: 100px;
  border-right-style: solid;
  border-top: transparent;
  border-top-style: solid;
  border-top-width: attr(data-content);
 }

$('.rombo .fusion-text').attr('data-content','503px');

$(window).resize(function() {
  $('.rombo .fusion-text').attr('data-content',$('.rombo .fusion- 
  text').css('height'));
  //alert(typeof($('.rombo .fusion-text').attr('data-content')));
   alert($('.rombo .fusion-text').css('width'));
 });

我要强调的是,显然现在的js代码没有做任何事情,因为直接在代码检查器中我得到了这个错误。

[enter image description here

我知道它在其他情况下有用,因为我自己检查过,但我不知道如何让它在这种情况下工作。

1 个答案:

答案 0 :(得分:0)

我认为这是一个明智的解决方案。祝贺。

尝试解决此问题,在css文件中指定attr的第二个arg。作为you can see here,px和其他属性都有一个特定的标志。我认为你也必须省略“px”:

$('.rombo .fusion-text').attr('data-content','503');

我不相信它会起作用,对我来说也是新事物