学习笔记：前端伪元素

it2025-08-04 6

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> div{ width: 100px; height: 100px; padding: 10px; background-color: green; } div::after{ content: ""; display: block; width: 50px; height: 50px; background-color: red; } </style> </head> <body> <div></div> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; console.log(window.getComputedStyle(div,'after').width); console.log(window.getComputedStyle(div,'after').height); </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> .box{ width: 100px; height: 100px; padding: 10px; background-color: green; } .box::after{ content: ""; display: block; width: 50px; height: 50px; background-color: red; } .box.active::after{ background-color: black; } </style> </head> <body> <div class="box active"></div> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; div.onclick = function(){ this.className += ' active'; } console.log(window.getComputedStyle(div,'after').width); console.log(window.getComputedStyle(div,'after').height); </script> </body> </html> ```javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课时1</title> <style type="text/css"> .box.active{ width: 200px; height: 200px; background-color: red; border-radius: 50%; } </style> </head> <body> <div class="box active"></div> <script type="text/javascript"> var div = document.getElementsByTagName('div')[0]; div.onclick = function(){ this.className += ' active'; } </script> </body> </html>

最新回复(0)