Galera, estou um trabalho da faculdade de engenharia da computação onde estou desenvolvendo um projeto para deficientes, e precisava de um script para trocar o estilo da minha página. Alguém poderia me ajudar por favor?
Tinha que deixar o site Preto e Braco!
Bem, vamos lá, não sei com é o site, tem banco de dados?
Uma boa escolha minha opinião seria seria na:
Criar duas folhas de Estilo com as acessibilidades diferentes - Preta e Branca no seu caso
Criar uma tabela no banco de dados com valores 0,1 por exemplo, “0” seria atribuído a para Tema1 e “1” para tema 2;
Criar um botão com uma função JavaScript para que quando clicar no Botão, Rodar um script PHP que altera a a coluna “Tema (por exemplo) de 0 para 1”; Ou usar SESSION do PHP, deve ter com fazer com SESSIONS ou Cookies também
No head do HTML onde você chama as Stylesheets e Scripts, fazer uma condição com base em um SELECT da coluna Tema, dentro de um bloco PHP, ou no Body, dependendo das alterações, for só Fundo preto e letra Branca apenas
Simples de mais:
Se(Coluna_Tema == 1)
{
$tema = Cria o link HTML com php, usando o href da css para chamar o tema:
}else {
Será que dá certo pra você assim?
Deve ter formas mais simples de fazer isso, talvez com Apis, bibliotecas,considere que essa dica veio de um programador que não tem Formação nem certificados superiores, ;e só uma forma que Eu faria se fosse meu caso ok?
Espero ter ajudado! Boa sorte
Com Javascript, você pode fazer o seguinte:
No HTML da página, insira os CSS normalmente e coloque um especial, como abaixo:
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="" data-href="css/pretoebranco.css" id="link-pretoebranco" >
No main.css, vai estar o site com seu estilo normal, e no pretoebranco.css sobrepondo os estilos como você deseja. Note que o href do segundo está vazio, e há um campo data-href apontando pro arquivo.
Ainda no HTML, coloque um botão ou qualquer outra coisa que deseje para ativar o estilo alternativo.
<p><button id="mudaEstilo">Alterar estilo</button></p>
No Javascript, faça o botão responder ao clique e preencher o href da tag link com o conteúdo do campo data-href. Aqui usando jQuery:
$(function () {
$("#mudaEstilo").click(function () {
var atual = $("#link-pretoebranco").attr("href");
if (atual === "") {
$("#link-pretoebranco").attr("href", $("#link-pretoebranco").data("href"));
$(this).text('Voltar estilo');
} else {
$("#link-pretoebranco").attr("href", "");
$(this).text('Mudar estilo');
}
});
});
Se precisar manter o estado entre as páginas, você pode usar o Web Storage, que é mais interessante e muito mais simples que cookies. Mais informações sobre ele em http://www.w3schools.com/html/html5_webstorage.asp
Show de mais, a dúvida nem era minha, mas acabei pegando essas dicas para mim, não sabia do Web storage, muito legal…Valeu