Wyłonanie zmiany wielkości zmiennych w CSS, po prez JS, podczas zdarzenia onClick.

pytanie zadane 7 czerwca 2015 w JavaScript przez ShiroUmizake Nałogowiec (46,300 p.)

Jak wywołać zmianę wielkośći zmiennych zapisanych w CSS (width, height), po przez wyłowanie zdarzenia w JS(onclick). Trzeba się odwoływać klasy selektora? Z góry zaznaczam, że nie wchodzi w grę pseudoselektor active (On podmienia wygląd buttona, już wcześniej wciśniętego, ale nie zmienia wyglądu na poprzedni "po odciśnięciu").

        <style>
        .button
        {
        text-decoration:none;
        width:50px;
        height:50px;
        color:white;
        padding:10px;
        border-radius:10px;
        background-color:gray;
        border:1 px white solid;
        }
        .button:hover
        {
        text-decoration:none;
        width:50px;
        height:50px;
        color:white;
        padding:10px;
        border-radius:10px;
        background-color:black;
        border:1 px white solid;
        }
        </style>
    </head>
    <body>
                    <a class="button" id="button" href="#">Button</a>

<script>
var clicker = document.getElementById("button");

clicker.onclick = function ()
    {
        clicker.style.width             =     "75px";
        clicker.style.height           =     "75px";

    };
</script>

PS: Wiem, że w bootstrapie jest taka funkcja.

2 odpowiedzi

odpowiedź 8 czerwca 2015 przez chris Gaduła (3,680 p.)
wybrane 8 czerwca 2015 przez ShiroUmizake

odpowiedź 7 czerwca 2015 przez Comandeer Guru (601,550 p.)

Najłatwiej jest zmieniać klasę tego elementu przy pomocy classList API

clicker.classList.toggle('klasa');

No i w tej klasie ustawić wszystkie własności, które chce się zmienić. To API ma też kilka innych możliwości: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Haczyk? Działa od IE 10, ale można to łatwo naprawić: http://youmightnotneedjquery.com/#toggle_class

Ogólnie nie poleca się zmieniać stylów w JS, ale zmieniać stan elementu (klasę) - daje to większe możliwości i chroni nas od sytuacji, w której lwiej części wyglądu trza szukać w JS.