无法通过打字稿访问伪元素

时间:2018-01-10 03:13:30

标签: javascript angular typescript

嘿我在这里遇到麻烦..

我的页面上有一个元素,它是一个正方形,它有一个伪元素:after,用于创建和指向箭头..现在我试图在我的角应用程序中访问这个psuedo元素。但是我得到了这个错误

enter image description here

我的代码如下

app.component.ts

 // Declared variable
 const creativeTechnologyTopBox = 
 window.getComputedStyle(<HTMLElement>document.querySelector('.about-us_creative-technology_top-box'), ':after');

 // Declared function
 function mouseEnter(squareName, topBoxName, translatePercentage) {
  squareName.style.transition = '0.5s';
  topBoxName.style.display = 'block';
  squareName.style.zIndex = '1';
  squareName.style.width = '100vw';
  squareName.style.transform = `translateX(${translatePercentage})`;
}

// Calling function
creativeTechnology.onmouseenter = function(){
  mouseEnter(creativeTechnologySquare, creativeTechnologyTopBox, '0');
};

HTML

 <div class="about-us_creative-technology">
            <div class="about-us_creative-technology_top-box">
                <div class="about-us_creative-technology_h1">
                        <h1>Creative<br>Technology</h1>
                    </div>
                    <ul>
                        <li>Mobile and Web Application Development</li>
                        <li>Product Development</li>
                        <li>Software Development and Management</li>
                        <li>Architecture and Design</li>
                        <li>Cloud Management, Strategy and Management</li>
                    </ul>
            </div>
            <div class="about-us_creative-technology_square">

            </div>
    </div>

CSS

&_top-box{
        height: 25vw;
        position: relative;
        &:after {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(255, 255, 255, 0);
            border-top-color: #F2F2F2;
            border-width: 25px;
            margin-left: -25px;
            z-index: 2;
            display: none;
        }
    }

如果我控制日志topBoxName我得到了

enter image description here

然后,如果我添加.getPropertyValue(display),当cosole记录时我得不到,所以我已经能够得到它

我不确定我做错了什么,任何帮助都会受到赞赏

由于

2 个答案:

答案 0 :(得分:0)

getComputedStyle()(从getComputedStyle返回的对象是只读的)方法(IE < 9: currentStyle property)对应于应用所有样式表后元素的呈现页面样式。设置样式属性直接通过元素的style属性完成:

答案 1 :(得分:0)

根据文档getComputedStyle

  

getComputedStyle返回的对象是只读的,可以使用   检查元素的样式(包括由a设置的样式)   元素或外部样式表)。 element.style对象应该是   用于在特定元素上设置样式。