JavaScript Manipulando atributos e estilos dos elementos

 

Na manipulação do DOM, além de selecionar elementos, podemos também manipular seus atributos e estilos. Isso nos permite alterar o comportamento e a aparência dos elementos em uma página web dinamicamente.

Para manipular atributos de um elemento, podemos usar as propriedades getAttribute() e setAttribute(). A primeira é usada para obter o valor de um atributo específico de um elemento, enquanto a segunda é usada para definir o valor de um atributo.

Por exemplo, para obter o valor do atributo href de um link, podemos fazer o seguinte:

javascript
const link = document.querySelector('a');
const href = link.getAttribute('href');
console.log(href);

Para definir o valor do atributo href de um link, podemos fazer o seguinte:

javascript
const link = document.querySelector('a');
link.setAttribute('href', 'http://www.google.com');

Para manipular os estilos de um elemento, podemos usar a propriedade style. Ela permite que definamos o valor de um estilo diretamente no elemento, como se estivéssemos escrevendo em um arquivo CSS.

Por exemplo, para definir a cor de fundo de um elemento, podemos fazer o seguinte:

javascript
const element = document.querySelector('.box');
element.style.backgroundColor = 'red';

Podemos também definir múltiplos estilos de uma vez só, usando um objeto literal:

javascript
const element = document.querySelector('.box');
element.style = {
  backgroundColor: 'red',
  color: 'white',
  padding: '20px',
  borderRadius: '5px'
};

É importante lembrar que, embora seja possível manipular os atributos e estilos dos elementos diretamente, é uma boa prática manter o CSS em um arquivo separado e fazer a manipulação dos estilos via JavaScript somente quando necessário. Isso ajuda a manter uma separação clara entre a estrutura e a apresentação da página, facilitando a manutenção do código.