Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. English
  3. Scripting / Logic
  4. JavaScript
  5. Check if an element contains a class in JavaScript?

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.1k

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    9.1k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.4k

Check if an element contains a class in JavaScript?

Geplant Angeheftet Gesperrt Verschoben JavaScript
3 Beiträge 3 Kommentatoren 825 Aufrufe 3 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • R Offline
    R Offline
    roshan.sharma
    schrieb am zuletzt editiert von roshan.sharma
    #1

    Hi
    I'm not a big fan of dynamic programming languages, although I've written a lot of JavaScript code. I never quite understood the concept of prototype-based programming; does anyone know how it works?
    I was working on a JavaScript project with the source checking if an element contains a class.
    I'm currently doing this:

    code_text
    var test = document.getElementById("test");
    var testClass = test.className;
    
    switch (testClass) {
      case "class1":
        test.innerHTML = "I have class1";
        break;
      case "class2":
        test.innerHTML = "I have class2";
        break;
      case "class3":
        test.innerHTML = "I have class3";
        break;
      case "class4":
        test.innerHTML = "I have class4";
        break;
      default:
        test.innerHTML = "";
    }
    <div id="test" class="class1"></div>
    

    The problem is when I change the HTML code to...
    <div id="test" class="class1 class5"></div>
    There is no longer an exact match, so I get the standard output of nothing (""). But I still want the output to be I have class1 because <div> still contains class .class1 .
    Can someone help me

    liv-in-skyL OliverIOO 2 Antworten Letzte Antwort
    0
    • R roshan.sharma

      Hi
      I'm not a big fan of dynamic programming languages, although I've written a lot of JavaScript code. I never quite understood the concept of prototype-based programming; does anyone know how it works?
      I was working on a JavaScript project with the source checking if an element contains a class.
      I'm currently doing this:

      code_text
      var test = document.getElementById("test");
      var testClass = test.className;
      
      switch (testClass) {
        case "class1":
          test.innerHTML = "I have class1";
          break;
        case "class2":
          test.innerHTML = "I have class2";
          break;
        case "class3":
          test.innerHTML = "I have class3";
          break;
        case "class4":
          test.innerHTML = "I have class4";
          break;
        default:
          test.innerHTML = "";
      }
      <div id="test" class="class1"></div>
      

      The problem is when I change the HTML code to...
      <div id="test" class="class1 class5"></div>
      There is no longer an exact match, so I get the standard output of nothing (""). But I still want the output to be I have class1 because <div> still contains class .class1 .
      Can someone help me

      liv-in-skyL Offline
      liv-in-skyL Offline
      liv-in-sky
      schrieb am zuletzt editiert von
      #2

      @roshan-sharma

      I have tried this in a standard html widget:

      Image 057.png

      <div id="test" class="class1 class3"></div>
      
      <script>
      var test = document.getElementById("test");
      var testClass = test.className;
      console.log(test.className);
      console.log(test.getAttribute('class'));
      
       
      switch (testClass) {
        case "class1":
          test.innerHTML = "I have class1";
          break;
        case "class2":
          test.innerHTML = "I have class2";
          break;
        case "class3":
          test.innerHTML = "I have class3";
          break;
        case "class4":
          test.innerHTML = "I have class4";
          break;
        default:
          test.innerHTML = "";
      }
      
      if (test.classList.contains("class3")) {console.log("with class3");
                                              test.innerHTML = "I have class3";}
      if (test.classList.contains("class1")) {console.log("with class1");
                                              test.innerHTML += "<br> I have class1";}
      
      
      
      </script>
      
      
      

      the result is:

      Image 056.png

      the problem is the switch command !

      nach einem gelösten Thread wäre es sinnvoll dies in der Überschrift des ersten Posts einzutragen [gelöst]-... Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat. Forum-Tools: PicPick https://picpick.app/en/download/ und ScreenToGif https://www.screentogif.com/downloads.html

      1 Antwort Letzte Antwort
      0
      • R roshan.sharma

        Hi
        I'm not a big fan of dynamic programming languages, although I've written a lot of JavaScript code. I never quite understood the concept of prototype-based programming; does anyone know how it works?
        I was working on a JavaScript project with the source checking if an element contains a class.
        I'm currently doing this:

        code_text
        var test = document.getElementById("test");
        var testClass = test.className;
        
        switch (testClass) {
          case "class1":
            test.innerHTML = "I have class1";
            break;
          case "class2":
            test.innerHTML = "I have class2";
            break;
          case "class3":
            test.innerHTML = "I have class3";
            break;
          case "class4":
            test.innerHTML = "I have class4";
            break;
          default:
            test.innerHTML = "";
        }
        <div id="test" class="class1"></div>
        

        The problem is when I change the HTML code to...
        <div id="test" class="class1 class5"></div>
        There is no longer an exact match, so I get the standard output of nothing (""). But I still want the output to be I have class1 because <div> still contains class .class1 .
        Can someone help me

        OliverIOO Offline
        OliverIOO Offline
        OliverIO
        schrieb am zuletzt editiert von OliverIO
        #3

        @roshan-sharma

        better is to use jquery

        https://api.jquery.com/hasclass/

        var test = $("#test");
        if ($(test).hasClass("class1")) {
           $(test).html("I have class1");
        }
        if ($(test).hasClass("class2")) {
           $(test).html("I have class2");
        }
        

        jquery is in vis already loaded

        Meine Adapter und Widgets
        TVProgram, SqueezeboxRPC, OpenLiga, RSSFeed, MyTime,, pi-hole2, vis-json-template, skiinfo, vis-mapwidgets, vis-2-widgets-rssfeed
        Links im Profil

        1 Antwort Letzte Antwort
        0
        Antworten
        • In einem neuen Thema antworten
        Anmelden zum Antworten
        • Älteste zuerst
        • Neuste zuerst
        • Meiste Stimmen


        Support us

        ioBroker
        Community Adapters
        Donate

        935

        Online

        32.5k

        Benutzer

        81.6k

        Themen

        1.3m

        Beiträge
        Community
        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
        ioBroker Community 2014-2025
        logo
        • Anmelden

        • Du hast noch kein Konto? Registrieren

        • Anmelden oder registrieren, um zu suchen
        • Erster Beitrag
          Letzter Beitrag
        0
        • Home
        • Aktuell
        • Tags
        • Ungelesen 0
        • Kategorien
        • Unreplied
        • Beliebt
        • GitHub
        • Docu
        • Hilfe