Style entfernen Best Practice JS

[Oliver77]

Hallo, hab mal ne Frage,
was ist best practice, um einen Style zu entfernen?

 mobileNav.style.left = null;
// oder
mobileNav.style.left = "";

Das mit Null habe ich irgendwo aufgeschnappt.

 

[AndreasB]

Das hat beides den selben Effekt.

A style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null.

Ich schreibe lieber null, da ich das expliziter finde. allerdings lässt Typescript nur "" zu. Also verwende ich in Typescript immer "".

Es ist also dir überlassen. Such dir eine Art aus und bleibe dabei.

 

[OctoberBlues]

Und als dritte Antwort: Wenn es darum geht den Style nur aus einem bestimmten Element zu entfernen, dann geht ja auch:

element.removeAttribute('style');

 

[threadi]

Und als vierte Antwort, möglicherweise sollte auch das hier gehen um einen Wert komplett zurück zu setzen:

mobileNav.style.left = "unset";

Letztlich kommt es aber eben auch auf den Zusammenhang an in dem man das ausführen will. Ein Link wäre ggfs. sinnvoll um sich das anzuschauen.

 

[Oliver77]

Hi danke für die Antworten.


Und nochmal hier das Javascript:

let toggle = true, allowedToClick = true;
const mobileNav = document.getElementById("mobilenav"),
        innerArrow = document.getElementById("inner-arrow"),
        body = document.querySelector("body"),
        stack = document.getElementById("stack"),
         nav2 = document.getElementById("nav2"),
        speed = 400;

function shift() {
    mobileNav.classList.add("shift");
    setTimeout(() => {
        mobileNav.classList.remove("shift");
        allowedToClick = true;
    }, speed);
}

function stackPos() {
    let h = window.innerHeight;
    stack.style.top = h / 2 + "px";
    if(nav2.offsetHeight < h) {
        mobileNav.style.position = "fixed";
    nav2.style.top = h / 2 + "px";
    }
}

function isTouchDevice() {
    try {
        document.createEvent("TouchEvent");
        return true;
    } catch (e) {
        return false;
    }
}

function equalHeight() {
    let docBody = document.body,
            html = document.documentElement;

    let height = Math.max(docBody.scrollHeight, docBody.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
    mobileNav.style.height = height + "px";
}

stack.addEventListener("click", () => {
    if (toggle && allowedToClick) {
        allowedToClick = false;
        mobileNav.style.left = "0px";
        innerArrow.style.transform = "rotate(180deg)";
        shift();
        toggle = false;
    } else if (!toggle && allowedToClick) {
        allowedToClick = false;
        mobileNav.style.left = null;
        innerArrow.style.transform = "rotate(0deg)";
        shift();
        toggle = true;
    }
});

let mql = window.matchMedia("(orientation: portrait)");
if (!mql.matches && isTouchDevice()) {
    body.classList.add("landscape");
    equalHeight();
    stackPos();
}
mql.addListener(function (event) {
      nav2.style.top = null;
      mobileNav.style.position = null;
    if (event.matches && isTouchDevice()) {
        body.classList.remove("landscape");
        mobileNav.style.height = null;
        stack.style.top = null;

    } else if (!event.matches && isTouchDevice()) {
        body.classList.add("landscape");
        equalHeight();
        stackPos();
    }
});
//stackPos();
//equalHeight();

 

[tk1234]

was ist best practice, um einen Style zu entfernen?

Garnicht. style sollte man garnicht manipulieren sondern die Darstellung über das Setzen/Entfernen von Klassen ändern. Evtl. lassen sich benötigte Werte als custom properties setzen, in dem Fall würde sich einiges durch reines CSS erschlagen lassen - ausprobieren lässt sich das nicht mehr da du in #5 den Link zu der Seite entfernt hast.

 

[Aaron3219]

Garnicht. style sollte man garnicht manipulieren sondern die Darstellung über das Setzen/Entfernen von Klassen ändern. Evtl. lassen sich benötigte Werte als custom properties setzen, in dem Fall würde sich einiges durch reines CSS erschlagen lassen - ausprobieren lässt sich das nicht mehr da du in #5 den Link zu der Seite entfernt hast.

Ergänzend dazu: Einen style auf null zu setzen funktioniert zwar, allerdings ist dies nicht beabsichtigt und unzulässig. Das lässt sich zum Beispiel überprüfen, indem man in TypeScript einen style auf null setzt. Du wirst sehen, dass TS dir hier einen error zurückgibt.