O texto é o ativo mais importante e visível para cada aplicativo ou página da web, sem o uso do texto o criador não pode transmitir totalmente seus pensamentos ou fornecer informações de maneira adequada. Devido à sua necessidade e importância, seu estilo também se torna um pesadelo para a maioria dos desenvolvedores. Para texto estático, as propriedades CSS e seu framework ajudam muito, mas ainda assim, há necessidade de uma propriedade que possa ser aplicada ao estilo dinamicamente. Felizmente, esta propriedade é fornecida por JavaScript com o nome “ textoDecoração ”.
Este blog fornecerá o procedimento para aplicar estilos sobre o elemento HTML por meio da propriedade textDecoration.
Como aplicar estilos usando a propriedade textDecoration do estilo HTML DOM?
O estilo DOM “ textoDecoração ”A propriedade basicamente executa estilos como adicionar“ sublinhado”, “sobrelinhado”, “line-through” e “piscar ” sobre um elemento selecionado. Esta propriedade quando definida como “ nenhum ”remove o estilo padrão aplicado sobre esse elemento como uma tag âncora.
Sintaxe
A sintaxe da propriedade textDecoration do estilo DOM é:
eleObj. estilo . textoDecoração = 'nenhum|overline|blink|underline|initial|line-through|herdar'
Visite a tabela abaixo para ter uma ideia rápida sobre os valores que podem ser atribuídos ao “ textoDecoração ' propriedade:
| Valor | Explicação |
|---|---|
| nenhum | Converta texto em formato simples removendo todos os estilos predefinidos; é o padrão. |
| sobrepor | Insere uma linha sobre ou acima do texto selecionado. |
| piscar | Faz o texto piscar, mas não é compatível com todos os navegadores da web. |
| sublinhado | Coloca a linha abaixo ou na parte inferior do texto selecionado. |
| inicial | Defina a propriedade aplicada com seu valor padrão, que é nenhum no nosso caso. |
| passagem de linha | Coloque a linha no centro do texto, ou seja, entre o texto. |
| você herda | Herda a propriedade aplicada ao elemento raiz ou pai. |
Agora, vamos dar uma olhada no processo de implementação e seu efeito no texto para cada valor de “ textoDecoração ' propriedade.
Exemplo 1: Propriedade “textDecoration = none”
A implementação prática do “ textoDecoração ”propriedade com valor de“ nenhum ”Será explicado no código abaixo:
< corpo >
< Centro >
< h1 estilo = 'cor: azulcadete;' > Linux < / h1 >
< botão ao clicar = 'Aplicador()' > Aplicador < / botão >
< p > Quando o valor da propriedade textDecoration é definido como nenhum: < / p >
< h3 eu ia = 'useCaso' estilo = 'decoração de texto: overline;' > Elemento direcionado < / h3 >
< / Centro >
< roteiro >
function Aplicador() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / roteiro >
< / corpo >
Explicação do código indicado acima:
- Primeiro, utilize um “< botão >” tag para criar um botão e atribuir a ele um ouvinte de evento de “ ao clicar ”. Este ouvinte de evento aciona uma função JavaScript chamada “ Aplicador ”.
- Em seguida, crie um elemento direcionado “ h3 ”E atribua a ele um ID exclusivo de“ useCase ”. Além disso, aplique o CSS “ decoração de texto ”propriedade com um valor de“ sobrepor ”com a ajuda do“ estilo ” atributo.
- Agora, digite o “ Aplicador ()”corpo da função e selecione o elemento alvo através de seu id“ useCase ”E anexe o estilo“ textoDecoração ' propriedade.
- Depois disso, atribua à propriedade um valor de “ nenhum ”Para remover qualquer estilo de decoração de texto pré-aplicado sobre o elemento.
A visualização da página web após a execução do código acima:
A saída mostra que o pré-estilo aplicado no elemento de destino é removido atribuindo-lhe um valor de “ nenhum ”.
Exemplo 2: Propriedade “textDecoration = inicial”
O trecho de código abaixo ilustra a implementação do “ textoDecoração ”propriedade quando o valor de“ inicial ”é atribuído a ele:
< roteiro >função Aplicador ( ) {
documento. getElementById ( 'useCaso' ) . estilo . textoDecoração = 'inicial' ;
}
roteiro >
A saída gerada após a compilação do código acima é mostrada abaixo:
A saída acima mostra que o valor da decoração de texto está definido com seu valor padrão, que é “ nenhum ”E, portanto, todo o pré-estilismo foi revertido.
Exemplo 3: Propriedade “textDecoration = overline”
O código abaixo mostra a implementação prática do “ textoDecoração ”propriedade quando o valor de“ sobrepor ”É fornecido a ele:
< corpo >< Centro >
< h1 estilo = 'cor: azulcadete;' > Linux < / h1 >
< botão ao clicar = 'Aplicador()' > Aplicador < / botão >
< p > Quando o valor da propriedade textDecoration é definido como sobreposto: < / p >
< h3 eu ia = 'useCaso' > Elemento direcionado < / h3 >
< / Centro >
< roteiro >
function Aplicador() {
document.getElementById('useCase').style.textDecoration = 'overline';
}
< / roteiro >
< / corpo >
A explicação do código acima é apresentada abaixo:
- Primeiro, o “ botão” e “h3 ”O elemento é criado da mesma maneira e a propriedade CSS que é aplicada sobre o “h3” elemento agora foi removido.
- A seguir, dentro do “ Aplicador ”Função o elemento alvo é selecionado e o“ textoDecoração ”propriedade com valor de“ sobrepor ”É atribuído ao elemento.
A saída após a execução do código acima é exibida abaixo:
A saída mostra o efeito do “ textDecoration = overline ”propriedade sobre o texto.
Exemplo 4: Propriedade “textDecoration = underline”
A implementação prática do texto quando o valor de “ sublinhado ”é atribuído ao“ textoDecoração ”A propriedade é declarada abaixo:
< roteiro >função Aplicador ( ) {
documento. getElementById ( 'useCaso' ) . estilo . textoDecoração = 'sublinhado' ;
}
roteiro >
Após a compilação, a saída fica assim:
A saída mostra que a linha foi adicionada na parte inferior do texto.
Exemplo 5: Propriedade “textDecoration = line-through”
Implementação visual do “ textoDecoração ”propriedade com o valor de“ passagem de linha ”é mostrado abaixo:
< roteiro >função Aplicador ( ) {
documento. getElementById ( 'useCaso' ) . estilo . textoDecoração = 'linha-através' ;
}
roteiro >
A saída gerada para o código acima é exibida abaixo:
A saída mostra o efeito feito pelo “ passagem de linha ”sobre o texto do elemento de destino.
Conclusão
O estilo HTML DOM “ textoDecoração ”A propriedade lida especificamente com o estilo de elementos HTML via JavaScript para executar estilos dinâmicos em elementos de texto. Vários valores podem ser atribuídos a este “ textoDecoração ”Para realizar diferentes variações de estilo. Esses valores são “ nenhum”, “sobrelinha”, “sublinhado”, “line-through”, “inicial”, “piscar” e “herdar ”. Este blog explicou com sucesso o processo pelo qual o desenvolvedor pode aplicar estilos usando a propriedade textDecoration.