Função do javaScript não soma (RESOLVIDO)

Front-end
#1

Boa tarde galera, estou tentando dar zoom quando o mouse passa por cima da imagem, e elaborei a seguinte função em JavaScript:

function aumentarImagem(obj){

        console.log('Valor antes de aumentar: '+ obj.height);

        obj.width = obj.width+50;

        obj.height = obj.height+50; 

        console.log('Valor após aumentar: '+obj.height);

        alert('Entrando na função');

    }

    function diminuirImagem(obj){

        

        console.log('Valor antes de aumentar: '+ obj.height);

        obj.width = 100;

        obj.height = 100;

        console.log('Valor após aumentar: '+obj.height);

        alert('Entrando na função');

    }

Mas ao verificar os dados que estão sendo retornado no console não traz a somatória e consequentemente a imagem também não da o zoom, onde esta o erro ?

#2

Mano, na w3 tem bastante material sobre o JS básico.

Da uma olhada:
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover

#3

Olá, tentei fazer como no exemplo e mesmo assim não foi, será que é por que o tamanho da imagem esta no css e não direto na tag como no exemplo ?

HTML

                <img src="resources/img/consultaraluno.jpg"

                    onclick="cadastrarAluno()"  onmouseover="aumentarImagem(this)" onmouseout="diminuirImagem(this)"/> </br>

                    <a onclick="cadastrarAluno()">CADASTRAR NOVOS ALUNOS</a>

            </div>

css:

img{

width: 130px;

height: 100px;

margin-top: 5%;

padding: 2px;

}

#4

Agora ficou assim o html… 

                <img src="resources/img/consultaraluno.jpg"

                    onclick="cadastrarAluno()"  onmouseover="aumentarImagem(this)" onmouseout="diminuirImagem(this)" width="100" height="100"/> </br>

                    <a onclick="cadastrarAluno()" >CADASTRAR NOVOS ALUNOS</a>

            </div>

Não seria incorreto deixar o tamanho da imagem direto na tag ?

#5

Como você definiu os tamanhos no CSS (130px e 100px), podia colocar valores fixos também para aumentar e diminuir. Além disso, essas propriedades ficam no style, então as funções ficariam assim:

function aumentarImagem(obj) {
    console.log('Valor antes de aumentar: ' + obj.style.height);
    obj.style.width = '180px';
    obj.style.height = '150px';
    console.log('Valor após aumentar: ' + obj.style.height);
}

function diminuirImagem(obj) {
    console.log('Valor antes de diminuir: ' + obj.style.height);
    obj.style.width = '130px';
    obj.style.height = '100px';
    console.log('Valor após diminuir: ' + obj.style.height);
}

Repare que o valor tem que ter a unidade (px), não apenas o número (já que existem muitas unidades diferentes no CSS).

Claro, se quiser incrementar um pouco (por exemplo, deixar configurável o quanto a imagem aumenta), poderia fazer algo do tipo:

var incremento = 50;
var heightDefault = '100px', widthDefault = '130px';
function aumentarImagem(obj) {
    console.log('Valor antes de aumentar: ' + obj.style.height);
    obj.style.width = add(obj.style.width || widthDefault, incremento);
    obj.style.height = add(obj.style.height || heightDefault, incremento);
    console.log('Valor após aumentar: ' + obj.style.height);
}

function diminuirImagem(obj) {
    console.log('Valor antes de diminuir: ' + obj.style.height);
    obj.style.width = add(obj.style.width || widthDefault, -incremento);
    obj.style.height = add(obj.style.height || heightDefault, -incremento);
    console.log('Valor após diminuir: ' + obj.style.height);
}

function add(valor, incremento) {
    var n = parseInt(valor.slice(0, -2));
    var unidade = valor.slice(-2);
    return `${n + incremento}${unidade}`;
}

Exemplo completo.

#6

Outra coisa, quando você define as propriedades no CSS, elas não estarão acessíveis no style do elemento (somente se você declará-las inline no HTML). Mas você pode obtê-las usando window.getComputedStyle. Outro ponto é que as funções que aumentam e diminuem são praticamente iguais, então daria para generalizar um pouco, assim:

var incremento = 50;
var heightDefault = '100px', widthDefault = '130px';

function getStyleProp(elemento, prop) {
    // pega do style, mas se não existir, busca no computed style
    return elemento.style[prop] || window.getComputedStyle(elemento)[prop];
}

function mudarTamanho(obj, aumenta, incremento) {
    var func = aumenta ? 'aumentar' : 'diminuir';
    if (! aumenta) incremento *= -1; // se é para diminuir, o incremento é negativo
    var w = getStyleProp(obj, 'width');
    var h = getStyleProp(obj, 'height');
    console.log(`Valor antes de ${func}: ${h}, ${w}`);
    obj.style.width = add(w || widthDefault, incremento);
    obj.style.height = add(h || heightDefault, incremento);
    console.log(`Valor após de ${func}: ${obj.style.height}, ${obj.style.width}`);
}

function aumentarImagem(obj) {
    mudarTamanho(obj, true, incremento);
}

function diminuirImagem(obj) {
    mudarTamanho(obj, false, incremento);
}

function add(valor, incremento) {
    var n = parseInt(valor.slice(0, -2));
    var unidade = valor.slice(-2);
    return `${n + incremento}${unidade}`;
}

Exemplo completo.

1 curtida