Seleziona una pagina

Di recente ho avuto la necessità di modificare lo style css (attributo class) di una serie di elementi presenti nel DOM di una pagina web. Per farlo ho deciso di utilizzare JavaScript, ma scritto prima sotto forma di TypeScipt.

Come funziona?

Il codice è molto semplice e si legge da solo, ma lo riassumo in pochi punti:

  • definisco la classe “CSSClass”
  • dichiaro “_element” di tipo HTMLElement
  • espongo due metodi pubblici “Add” e “Remove” per andare ad agire sul DOM della pagina

Cambiare lo style css con TypeScript

class CSSClass {

    private _element: HTMLElement;
    
    private _getElementFromDOM(id: string) {
        this._element = <HTMLElement>document.getElementById(id);
    }

    public Add(id: string, cssClass: string) {
        this._getElementFromDOM(id);
        this._element.setAttribute("class", cssClass);
    }

    public Remove(id: string) {
        this._getElementFromDOM(id);
        this._element.removeAttribute("class");
    }
}

Cambiare lo style css con Javascript

    var CSSClass = /** @class */ (function () {
    function CSSClass() {
    }
    CSSClass.prototype._getElementFromDOM = function (id) {
        this._element = document.getElementById(id);
    };
    CSSClass.prototype.Add = function (id, cssClass) {
        this._getElementFromDOM(id);
        this._element.setAttribute("class", cssClass);
    };
    CSSClass.prototype.Remove = function (id) {
        this._getElementFromDOM(id);
        this._element.removeAttribute("class");
    };
    return CSSClass;
}());

Come usare il JS appena prodotto

Ora -per usarlo- basta “solamente” effettuare la chiamata ai metodi “Add” & “Remove” in base alle proprie necessità.

var css = new CSSClass();
css.Add("row1", "boldandred");
css.Remove("row2");
css.Add("row3", "boldandred");

Tutto qua? Esattamente! Ora non vi resta che divertirvi a modificare il vostro DOM per cambiare a piacere tutti gli elementi desiderati.

Pin It on Pinterest

Share This

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi