Query .addClass()
Demonstrates adding CSS classes to elements using .addClass()
query-addclass
component
Query
page.js
Attributes
addClass() can accept multiple classes separated by spaces
["query","attributes","classes","styling"]
.addClass()
Example
Semantic UI
Documentation
UI Components
Learn
Examples
ctrl+k
Enter a search term above to see results...
Categories
Framework
UI Components
Templates
Reactivity
Query
Utils
Setup
Browser Usage
ESM Usage
Export Globals
No Conflict
Introduction
Chaining
Creating DOM
DOM Basics
Shadow DOM
Components
.component()
.dataContext()
.initialize()
.setting()
.settings()
Attributes
.addClass()
.attr()
.data()
.hasClass()
.removeAttr()
.removeClass()
.toggleClass()
Content
.getSlot()
.html()
.outerHTML()
.setSlot()
.text()
.textNode()
.value()
CSS
.computedStyle()
.css()
.cssVar()
Dimensions
.height()
.innerHeight()
.innerWidth()
.naturalHeight()
.naturalWidth()
.outerHeight()
.outerWidth()
.scrollHeight()
.scrollLeft()
.scrollTop()
.scrollWidth()
.width()
DOM Manipulation
.append()
.clone()
.detach()
.insertAfter()
.insertBefore()
.prepend()
.remove()
.reverse()
DOM Traversal
.children()
.clippingParent()
.closest()
.containingParent()
.contains()
.filter()
.find()
.indexOf()
.is()
.next()
.not()
.parent()
.prev()
.siblings()
Events
.blur()
.click()
.dispatchEvent()
.focus()
.off()
.on()
.on() Delegation
.on() Abort
.on() Callback
.one()
.ready()
.submit()
.trigger()
Iterators
.each()
.map()
Logical Operators
.end()
.eq()
.last()
.slice()
Utilities
.count()
.el()
.exists()
.first()
.get()
.index()
.prop()
Documentation
UI Components
Learn
Examples
Examples
Intro
Current Time
Usage
CDN
Lifecycle
Counter
Kitchen Sink
On Created
Events
Event Binding
Event Data
Global Events
Styling
Color Palette
Dynamic Breakpoints
Tailwind
Theme Preview
Settings
Basic Settings
Modifying Settings
Setting Types
Keybinding
Advanced Keys
Basic Keys
Comms
External Calls
Interactive
Accordion
Context Menu
Tabs
Data Display
Product Card
Spectrum Analyzer
Complex
Advanced Colors
Card Search
Form Builder
TodoMVC
Feedback
Loader
Progress Bar
Form Elements
Checkbox
Color Picker
Dropdown
Rating Slider
Search
Star Rating
Canvas
Advanced Balls
Ball Simulation
Fireworks
SVG
Clock
Syntax
Expressions
Loops
Subtemplates
Subtemplates
Subtemplates Advanced
Snippets
Snippets
Snippets Advanced
Helpers
Global Helpers
Async
Async
Async Advanced
Introduction
Reactions
Signals
Signals
Computed
Derived
Peek
Reactions
Automatic Flush
First Run
Forcing Flushes
Reactivity Sources
Subscribe
Settings
Clone
Equality Function
Helpers
Get Index
Get Item
Clear
Decrement
Filter
Increment
Map
Mutate
Now
Push
Remove Index
Remove Item
Replace Item
Set Index
Set Property
Splice
Toggle
Unshift
Set Array Property
Performance
Guard
Nonreactive
Controls
After Flush
Schedule Flush
Stop Reaction
Advanced
Batch Updates
Birthday
Context
External Sync
Mutation Helpers
Performance
Setup
Browser Usage
ESM Usage
Export Globals
No Conflict
Introduction
Chaining
Creating DOM
DOM Basics
Shadow DOM
Components
.component()
.dataContext()
.initialize()
.setting()
.settings()
Attributes
.addClass()
.attr()
.data()
.hasClass()
.removeAttr()
.removeClass()
.toggleClass()
Content
.getSlot()
.html()
.outerHTML()
.setSlot()
.text()
.textNode()
.value()
CSS
.computedStyle()
.css()
.cssVar()
Dimensions
.height()
.innerHeight()
.innerWidth()
.naturalHeight()
.naturalWidth()
.outerHeight()
.outerWidth()
.scrollHeight()
.scrollLeft()
.scrollTop()
.scrollWidth()
.width()
DOM Manipulation
.append()
.clone()
.detach()
.insertAfter()
.insertBefore()
.prepend()
.remove()
.reverse()
DOM Traversal
.children()
.clippingParent()
.closest()
.containingParent()
.contains()
.filter()
.find()
.indexOf()
.is()
.next()
.not()
.parent()
.prev()
.siblings()
Events
.blur()
.click()
.dispatchEvent()
.focus()
.off()
.on()
.on() Delegation
.on() Abort
.on() Callback
.one()
.ready()
.submit()
.trigger()
Iterators
.each()
.map()
Logical Operators
.end()
.eq()
.last()
.slice()
Utilities
.count()
.el()
.exists()
.first()
.get()
.index()
.prop()
Setup
Browser Usage
ESM Usage
Looping
each
asyncEach
asyncMap
Arrays
any
difference
filterEmpty
findIndex
first
firstMatch
flatten
groupBy
inArray
intersection
last
moveItem
moveToBack
moveToFront
range
remove
some
sortBy
sum
unique
uniqueItems
where
Objects
arrayFromObject
extend
filterObject
get
hasProperty
keys
mapObject
onlyKeys
pick
proxyObject
reverseKeys
values
weightedObjectSearch
Types
isArguments
isArray
isBinary
isBoolean
isClassInstance
isDOM
isEmpty
isFunction
isNode
isNumber
isObject
isPlainObject
isPromise
isString
Strings
camelToKebab
capitalize
capitalizeWords
escapeHTML
getArticle
joinWords
kebabToCamel
toTitleCase
Functions
debounce
memoize
noop
wrapFunction
Colors
oklchToHex
oklchToRgb
Dates
formatDate
Numbers
roundDecimal
roundNumber
Crypto
generateID
getRandomSeed
hashCode
prettifyHash
tokenize
Equality
isEqual
Cloning
clone
Errors
fatal
SSR
isClient
isServer
Regex
escapeRegExp
Return to main menu
Return to main menu
Semantic UI