2011-03-18 16 views
5

En CSS, he usado body:after para agregar contenido, quiero que jQuery obtenga su altura. ¿Cómo podría hacer eso?Seleccionar: después de pseudo clase/elemento

Leo de here tales pseudo elementos son para modificaciones y, por lo tanto, no se pueden seleccionar? Parece que ni siquiera puedo usar $("body > :last-child") para seleccionar el último hijo que debería ser el :after?

Respuesta

4

Tenga en cuenta que el contenido se agrega el uso de :after y content no es un node - tampoco es un elemento ni el texto del documento. Puedes ver esto con FireBug: en esta captura de pantalla, mi HTML contiene la palabra "hola" pero la palabra "mundo". se añade el uso de CSS:

Screenshot of a Hello World page where the word World is added with CSS content. FireBug is open, clearly showing that the CSS content does not add an element to the DOM

Lo que puede hacer es usar getComputedStyle para averiguar cuál es el contenido, como el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
    <head> 
     <title>Select :after pseudo class/element</title> 
     <style type="text/css"> 
     #msg:after { 
      content:" World!" 
     } 
     </style> 
     <script type="text/javascript"> 
     window.onload = function() { 
      if(window.getComputedStyle) { 
       var element = document.getElementById("msg"); 
       var style = window.getComputedStyle(element,':after') 
       alert(style.content); 
      } 
      else { 
       alert("This browser sucks!"); // ;) 
      } 
     } 
     </script> 
    </head> 
    <body> 
     <h1> 
      <span id="msg">Hello</span> 
     </h1> 
    </body> 
</html> 

... por desgracia, esto le da acceso al contenido pero no a la altura :(

+6

me gusta su mensaje de error :) –

+0

@MikeHometchko - Bueno, entonces me gustas, amigo! :RE –

Cuestiones relacionadas