A função attr () é interessante porque permite interagir com qualquer atributo de um objeto como parte de um estilo. Você vê essa função usado em um número de maneiras originais na Internet, mesmo que ele parece ser um segredo bem guardado em sua maior parte.

Um site que demonstra uma aplicação rápida que se baseia em attr () é The New Hotness: Usando CSS3 Efeitos Visuais. O procedimento a seguir demonstra a função attr () em uma maneira mais simples para que você possa entender melhor os poucos exemplos online que demonstrá-lo de forma detalhada.

1. Criar um novo arquivo de HTML5 com seu editor de texto.

2. Digite o seguinte código para a página HTML.

   Usando o attr () Função
   Mundo

   Tudo que você tem aqui é um título eo parágrafo. Observe que o parágrafo define um atributo padrão, id, e um atributo não-padrão, testText. O atributo que você usa para a função attr () não precisa ser padrão - você pode definir qualquer atributo desejado.

3. Salve o arquivo como Attr.HTML.

   Video: Curso de HTML5 e CSS3 Responsivo Aula 16 Estilizando textos com o conceito de CSS Orientado a Objeto

4. 
   
   
   

   Criar um novo arquivo CSS com seu editor de texto.

5. Digite o seguinte informações de estilo CSS.

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

   O estilo começa dizendo que a saída do estilo deve aparecer antes da tag referenciado por TestMe como um id. Em seguida, ele define o conteúdo dessa área para o valor atual do atributo testText usando a função attr ().

   Video: Theming Elements -- Polycasts #17

6. Salve o arquivo como Attr.CSS.

7. Carregar o exemplo Attr.

   A saída é muito bonito o que você esperaria, Olá Mundo. A função attr () pode torná-lo possível para você se esconder e usar todos os tipos de informações em suas páginas, reutilizar as informações de maneiras diferentes, ou mesmo executar tarefas de depuração.