前端面试题集: No.0001 使用 js 对 CSS 的 ::before & ::after 伪元素进行操作

[xgqfrms]

前端面试题集: No.0001 使用 js 对 CSS 的 ::before & ::after 伪元素进行操作

试题难度

高级

考察点

1. 高级 API 的掌握情况
2. 知识面广度与深度

demo

<a href="https://cdn.xgqfrms.xyz/logo/icon.png" class="logo"></a>

a::before {
  box-sizing: border-box;
  display: block;
  width: 300px;
  height: 300px;
  font-size: 37px;
  font-weight: bold;
  color: #000;
  padding-top: 30px;
  text-align: center;
  content: "xgqfrms's logo";
  background: url('https://cdn.xgqfrms.xyz/logo/icon.png') no-repeat;
}

const dom = document.querySelector('a');
const url = getComputedStyle(dom, ':before').getPropertyValue('background-image');
console.log(`::before url =`, url);

/*
"::before url =" "url('https://cdn.xgqfrms.xyz/logo/icon.png')"
*/

codepen live demo

https://codepen.io/xgqfrms/pen/OJvojyJ

试题来源/试题出处

https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript