A função attr () é interessante porque permite interagir com qualquer atributo de um objeto como parte de um estilo. Você vê esta função usada em uma série 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 on-line que demonstrá-lo de uma forma detalhada.

1. Criar um novo arquivo HTML5 com o 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 número 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.

4. Criar um novo arquivo CSS com o 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 uma id. Em seguida, ele define o conteúdo dessa área para o valor atual do atributo testText usando a função attr ().

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ção em suas páginas, reutilizar as informações de maneiras diferentes, ou mesmo executar tarefas de depuração.