5

Várias vezes vejo codificação nas tags <script>/<link> que possuem class:

<script type="text/javascript" language="javascript" class="init">
<link rel="stylesheet" href="css/main.css" class="main-stylesheet">

Ou até mesmo com id:

<link rel="stylesheet" href="css/ace.css" id="ace-style" />

Ou com os dois incorporados:

<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
  • Porque e qual a função de utilizar uma class ou id nessas tags?
  • Quando recomenda-se utilizar class e/ou id?

Talvez um exemplo de uso mais visível ajude a compreender melhor.

5
  • Em estilos é provavelmente para usar o atributo disabled para poder tipo mudar um tema dinamicamente sem precisar de "refresh", agora na tag script realmente não consigo enxergar nenhuma utilidade.
    – Syzoth
    Commented 4/08/2017 às 18:35
  • É só pesquisar no código fonte da página que viu isso e verificar o objetivo. Os atributos id e class funcionam como em qualquer outro elemento e é muito difícil dizer quando é utilizado. Basicamente, é utilizado quando precisa selecionar os elementos de forma dinâmica. O porquê de fazer isso pode variar muito.
    – Woss
    Commented 4/08/2017 às 20:26
  • @AndersonCarlosWoss, particularmente foi a primeira vez que eu vi e achei realmente muito estranho tal codificação. Resolvi perguntar para ver se alguém já tinha tratado com tal assunto. Obrigado pela explicação também Commented 4/08/2017 às 20:28
  • 1
    Estou respondendo com algo mais concreto.
    – Woss
    Commented 4/08/2017 às 20:30
  • Já utilizei id no style. Motivo, disponibilizei ao cliente poder trocar o tema da página. Então, tinha um array no js com vários estilos e ele selecionava via interface qual queria, depois apenas fazia referência via ID o style e colocava a URL do arquivo desejado, assim mudando toda a interface. Lembrei que, também já utilizei ID no script pra verificar se foi inserido um determinado arquivo .js. Caso não houvesse a inserção do mesmo, inseria via CDN. Commented 4/08/2017 às 20:43

1 Resposta 1

2

A exata função dos atributos só poderia ser dada ao analisar o código da aplicação em questão, porém, abaixo cito algumas possíveis aplicações destes atributos nestes elementos.

Os atributos id e class são atributos globais, o que significa que a função será sempre a mesma para qualquer elemento, sem exceção. Ou seja, o id irá definir um identificador único para o elemento, que deve ser único também no documento. Já o class define identificadores que não necessitam ser únicos, utilizado quando deseja identificar um grupo semelhante de elementos.

Mas por quê utilizar estes atributos em link e script?

Como comentado, as aplicações podem variar bastante conforme a necessidade de cada desenvolvedor e/ou aplicação. Para o elemento link o Guilherme comentou a aplicação mais óbvia: trocar dinamicamente o estilo da página.

const btn = document.getElementById("changeStyleButton");
const css = document.getElementById("cssFile");

btn.addEventListener("click", event => {
  let href = css.getAttribute("href");
  
  css.setAttribute("href", (href == "style.css") ? "other.css" : "style.css");
  
  console.log("O CSS mudou de " + href + " para " + css.getAttribute("href"));
});
<link id="cssFile" href="style.css" rel="stylesheet" />
<button id="changeStyleButton">Alterar estilo</button>

Considerando que ambos os arquivos, style.css e other.css, existem, o estilo da página atual irá ser alterado ao pressionar o botão. Porém, para o elemento script isso não faz muito sentido - pode até ser que alguma aplicação ou problema possam fazer uso desta troca de arquivos, mas sinceramente eu nunca vi necessidade. Mas tem uma aplicação utilizando o elemento script que é bem interessante: a Shadow DOM.

O que é shadow DOM?

A construção de Web Components se dá pela inserção de elementos na shadow DOM de outro elemento, basicamente, e como o objetivo é trabalhar com a shadow DOM não faz sentido você definir tais elementos na light DOM. As opções são: você criar os elementos dinamicamente com JavaScript ao definir a shadow DOM, o que pode ser bastante trabalhoso, ou criar o DOM fora da light DOM, dentro do meta e apenas copiá-lo para a shadow DOM. Esta segunda solução faz uso do elemento script type="text/template" e você precisará definir o atributo id para poder selecionar o DOM futuramente.

const element = document.getElementById("foo").createShadowRoot();
const shadow = document.getElementById('shadowDOM');

element.innerHTML = shadow.innerHTML;
<div id="foo"></div>

<script id="shadowDOM" type="text/template">
  <h1>Elemento na Shadow DOM</h1>
</script>

Para provar que o conteúdo é inserido na Shadow DOM, basta analisar com o inspetor do navegador:

inserir a descrição da imagem aqui

Vale citar que a partir do HTML 5 há o elemento template que substitui o uso do elemento script para a criação de DOM fora da light DOM. Eu comento sobre isso nesta resposta:

Para que serve a tag head no html?

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .