Dofactory.com
Dofactory.com
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

HTML <output> class Attribute

The class attribute assigns one or more classnames to the <output> tag.

Classnames are defined in a stylesheet or in a local <style> element.

Classes, i.e. classnames, are used to style elements.

Example

#

A class attribute styling an <output> element.



The value is 25
<style>
  .output-result {
    background-color: #4238ca;
    color: #fff;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 10px;
  }
</style>

<form oninput="result.value = slider.value">
  <input type="range" id="slider" value="25"> 

  <br /><br />
  The value is <output class="output-result"
                       name="result"
                       for="slider">25</output>
</form>

Using class

Classes (i.e. classnames) are used for styling the output element.

Multiple classnames are separated by a space.

JavaScript uses classes to access elements by classname.

Tip:  class is a global attribute that can be applied to any HTML element.


Syntax

<output class="classnames">

Values

#

Value Description
classnames One or more space-separated class names.

More Examples

A class attribute styling an <output> element.
Clicking the button toggles a classname that changes the output background and text colors.



The value is 25

<style>
  .output {
    background-color: #4238ca;
    color: #fff;
    padding: 8px 15px;
    margin: 5px;
    border-radius: 10px;
  }
  .bg-lighter { 
    background-color: #808cf8; 
  }
</style>

<form oninput="display.value = range.value">
  <input type="range" id="range" value="25"> 

  <br /><br />
  The value is <output class="output" id="myoutput"
                       name="display"
                       for="range">25</output>
</form>

<br />
<button onclick="toggle();">Toggle class</button>

<script>
  let toggle = () => {
    let element = document.getElementById("myoutput");
    element.classList.toggle("bg-lighter");
  }
</script>

Code explanation

Three CSS classes are defined in the <style> element.

The class attribute in <output> assigns two of these classnames.

Repeatedly clicking the button toggles another class, changing the background and text color of the <output>.


Browser support

Here is when class support started for each browser:

Chrome
10.0 Mar 2011
Firefox
4.0 Mar 2011
IE/Edge
13.0 Nov 2015
Opera
11.0 Dec 2010
Safari
5.1 Oct 2011

You may also like

 Back to <output>

Last updated on Sep 30, 2023

Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides