嘿我在这里遇到麻烦..
我的页面上有一个元素,它是一个正方形,它有一个伪元素:after
,用于创建和指向箭头..现在我试图在我的角应用程序中访问这个psuedo元素。但是我得到了这个错误
我的代码如下
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
我得到了
然后,如果我添加.getPropertyValue(display)
,当cosole记录时我得不到,所以我已经能够得到它
我不确定我做错了什么,任何帮助都会受到赞赏
由于
答案 0 :(得分:0)
getComputedStyle()
(从getComputedStyle返回的对象是只读的)方法(IE < 9: currentStyle property
)对应于应用所有样式表后元素的呈现页面样式。设置样式属性直接通过元素的style
属性完成:
答案 1 :(得分:0)
根据文档getComputedStyle
getComputedStyle返回的对象是只读的,可以使用 检查元素的样式(包括由a设置的样式) 元素或外部样式表)。 element.style对象应该是 用于在特定元素上设置样式。