Cómo interactuar con atributos de objeto con la función attr () de css3

Video: CSS Tips & Tricks #3 - CSS-only Tooltip

La función attr () es interesante, ya que le permite interactuar con cualquier atributo de un objeto como parte de un estilo. Ves esta función se utiliza en un número de maneras únicas en Internet, a pesar de que parece ser un secreto bien guardado en su mayor parte.

Un sitio que muestra una aplicación rápida que se basa en attr () es La Nueva Picor: El uso de CSS3 Efectos Visuales. El siguiente procedimiento demuestra la función attr () de una manera más simple para que pueda entender mejor los pocos ejemplos en línea que demuestran de una manera detallada.

  1. Crear un nuevo archivo HTML 5 con su editor de texto.

  2. Escriba el siguiente código de la página HTML.

    Video: curso de jquery - attr y removeAttr

    Utilizando el attr () Función

    Utilizando el attr () Función

    Mundo

    Todo lo que tenemos aquí es un encabezamiento y el párrafo. Observe que el párrafo define un atributo estándar, ID, y un atributo no estándar, testText. El atributo se utiliza para la función attr () no tiene que ser estándar - se puede definir cualquier atributo deseado.

  3. Guarde el archivo como Attr.HTML.

  4. Crear un nuevo archivo CSS con su editor de texto.

  5. Escriba la siguiente información de estilo CSS.

    Video: jQuery tutorial- 39 attr()

    #TestMe: before {content: attr (testText) -}

    El estilo comienza diciendo que la salida desde el estilo debe aparecer antes de la etiqueta referenciada por TestMe como un id. A continuación, establece el contenido de esa área para el valor actual del atributo testText utilizando la función attr ().

  6. Guarde el archivo como Attr.CSS.

  7. Cargar el ejemplo Attr.

    La salida es más o menos lo que se espera, Hello World. La función attr () puede hacer que sea posible para que usted pueda ocultar y utilizar todo tipo de información en sus páginas, reutilizar la información de diferentes maneras, o incluso realizar tareas de depuración.

    Video: Curso javascript desde 0. JQuery VII. Cambiando atributos CSS I. Vídeo 35

Artículos Relacionados