Pergunta

Alguém sabe como repor a cor da borda de um controle de entrada depois de ter modificado-lo usando javascript? Útil para validação, destacando campos que têm dados incorretos ou inválidos neles etc.

por exemplo. mudando a fronteira:

document.getElementById('myinput').style.border = '1px solid red';

como repor? a próxima linha apenas remove a borda completamente ...

document.getElementById('myinput').style.border = '';

Se eu redefinir a volta cor da borda para uma cor em particular (por exemplo preto ou cinza etc), pode parecer estranho em alguns navegadores / sistemas operacionais que tipo de 'tema' a controles ...

graças montões!

Foi útil?

Solução

Não fazê-lo com a criação atributos de estilo. Faça isso usando classes CSS. Eu recomendaria também usando uma biblioteca Javascript para lidar com isso. Ela só faz o código mais limpo.

A remoção atributos CSS é problemático porque você nem sempre sabem o que deve ser definido de volta para. Adicionando e removendo aulas só ... obras.

Você pode ter várias classes por elemento então não há realmente nenhum argumento contra a fazê-lo desta maneira (IMHO).

Estou acostumado a jQuery assim que meu exemplo é com isso.

Caminho errado:

$("#myinput").css("border", "1px solid red");

Maneira direita:

<style type="text/css">
.redborder { border: 1px solid red; }
</style>

<script type="text/javascript">
$("#myinput").addClass("redborder");
$("#myinput").removeClass("redborder");
$("#myinput").toggleClass("redborder");
</script>

Outras dicas

Isso funciona para mim:

document.getElementById('myinput').style.removeProperty('border');

Você simplesmente querem a fronteira para ir embora? Eu não penso assim, como você afirmou que não é o caso.

A maneira correta de "reset" é definido como padrão. Não tenho a certeza que o padrão é, mas eu diria algo como '1px preto' ou similar.

Eu normalmente usam esta técnica em uma variedade de aplicações. Quando eu não sei o padrão, eu porei a minha própria "default" para que eu possa repeti-la. Uma das minhas técnicas favoritas, com páginas da web, é definir a cor de fundo do controle, ao invés da fronteira. É muito visível e você pode escolher uma cor mais silenciado e ainda ter impacto. Nesse caso, é muito fácil de fundo conjunto de volta ao branco, que é o padrão.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top