Alternar Css de uma pagina HTML

Front-end HTML
#1

Olá preciso alternar o css da minha página, são 3 css que tenho e ao clicar no botao 1 == css1,botao 2 == css2,botao 3 == css3.

E também não posso redireciona para outra pagina com css diferente devo fazer na mesma pagina.

Quem poder me ajudar agradeço desde de já.

#2

Tem como postar as partes do seu código que são relevantes pra sua dúvida?

1 curtida
#3

Verdade @wldomiciano, com o código do @JeffersonSousaa conseguimos ajudar melhor :smile: :computer: :floppy_disk:

#4

Você pode colocar um id na sua tag link que referencia o css.
Depois associe nos seus botoes uma funçao javascript que acesse aqueleId e mude a propriedade href para o arquivo css que você quer utilizar:

  //html
  <link id="master-css" rel="stylesheet" media="screen" href="opcao1.css">

  //javascript
  function mudaCss(fileName) {
    document.getElementById('master-css').href = fileName
  }

  mudaCss('css1.css'); //primeira opcao, coloca no botao1
  mudaCss('css2.css'); //segunda opcao, coloca no botao2
4 curtidas
#6

Meus link para puxar o css.

   <link id="Css1" rel="stylesheet" media="screen" href="css1.css" />
   <link id="Css2" rel="stylesheet" media="screen" href="css2.css" />
   <link id="Css3" rel="stylesheet" media="screen" href="css3.css" />

as funções devo tar cometendo algum erro infantil mas ainda sou leigo se poder verificar onde estou errando.

<button onclick="mudarCss1('css1');"> Css01</button> 
<button onclick="mudarCss2('css2');"> Css02</button> 
<button onclick="mudarCss3('css3');"> Css03</button> 

<script>
	function mudarCss1(css1.css) {
		document.getElementById(this).href = css1.css
	}
</script>

<script>
	function mudarCss2(css2.css) {
		document.getElementById(this).href = css2.css
	}
</script>

<script>
	function mudarCss3(css3.css) {
		document.getElementById(this).href = css3.css
	}
</script>
1 curtida
#7

Rapaz procure por CSS3 e utilize uma variavel adicionando uma cor, depois no html utilize o onclick para mudar a propriedade da variavel do css.
Assim você nao torna seu site pesado utilizando diversos css.

Ex: no html botao Document.getDocumentProperty(’–variavelCorCss’) = ‘green’;