Weiter zum Inhalt
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Hell
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dunkel
  • 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

  • Neuer ioBroker-Blog online: Monatsrückblick März/April 2026
    BluefoxB
    Bluefox
    5
    1
    137

  • Verwendung von KI bitte immer deutlich kennzeichnen
    HomoranH
    Homoran
    8
    1
    170

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    18
    1
    872

Check if an element contains a class in JavaScript?

Geplant Angeheftet Gesperrt Verschoben JavaScript
3 Beiträge 3 Kommentatoren 980 Aufrufe 3 Beobachtet
  • Ä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

        Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.

        Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.

        Mit deinem Input könnte dieser Beitrag noch besser werden 💗

        Registrieren Anmelden
        Antworten
        • In einem neuen Thema antworten
        Anmelden zum Antworten
        • Älteste zuerst
        • Neuste zuerst
        • Meiste Stimmen


        Support us

        ioBroker
        Community Adapters
        Donate

        323

        Online

        32.8k

        Benutzer

        82.7k

        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