本题考点:定位、样式、元素获取
根据题目要求,分析出本题核心步骤有五:
- 设置类名为“box”的div标签元素定位为相对定位
- 设置类名为“btn”的div标签元素定位为绝对定位
- 计算类名为“btn”的div标签元素中心定位在类名为“box”的div标签元素右上顶点的坐标
- 设置类名为“btn”的div标签元素内容居中且行高等于该标签的高度
- 在类名为“btn”的div标签元素点击事件中,设置类名为“box”的div标签元素“display”属性为“none”
首先设置类名为"box"的div标签元素定位属性为相对定位,这是为了保证类名为“btn”的div标签元素绝对定位有效。然后设置类名为“btn”的div标签元素定位属性为绝对定位以完成位置的固定,同时根据该元素的宽度和高度计算出定位坐标top:-10px、right:-10px,还要设置该元素的水平居中属性和行高属性为该元素的高度,以保证字体可以垂直居中在该元素中。最后在类名为“btn”的div标签元素点击事件中设置类名为"box"的div标签元素“style”属性中的“display”属性为"none"即可。
参考答案:
.box {
width: 100px;
height: 100px;
border: solid 1px black;
position: relative;
}
.btn {
width: 20px;
height: 20px;
position: absolute;
top: -10px;
right: -10px;
text-align: center;
line-height: 20px;
background-color: red;
}
btn.onclick = function() {
document.getElementsByClassName('box')[0].style.display = 'none'
}