Tips for including a new class in an HTML element

Question

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists.

This is the code I have attempted:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>index</title>

    <style>
        .black
        {
            background:#000;
            color:white;
        }

    </style>
    <script type="text/javascript">
        $(window).load(function () {
            $('textarea').addClass('black');
        });
    </script>
</head>
<body>

    <div>


        <textarea>content</textarea>


    </div>

    <script src="jquery.js"></script>

</body>
</html>

Desired Outcome: When the HTML body contains a textarea tag, I want the .black class to be automatically applied to it.

javascript jquery html css

Answer 1

Answer №1

To ensure that jQuery() is defined when called, try moving the

<script src="jquery.js"></script>

above the <script></script> containing the call to $(window).load()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>index</title>
  <style>
    .black {
      background: #000;
      color: white;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
  <script type="text/javascript"gt;
    $(window).load(function() {
      $('textarea').addClass('black');
    });
  </script>
</head>

<body>
  <div>
    <textarea>content</textarea>
  </div>
</body>

</html>

Answer 2

To ensure that jQuery() is defined when called, try moving the

<script src="jquery.js"></script>

above the <script></script> containing the call to $(window).load()

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>index</title>
  <style>
    .black {
      background: #000;
      color: white;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
  <script type="text/javascript"gt;
    $(window).load(function() {
      $('textarea').addClass('black');
    });
  </script>
</head>

<body>
  <div>
    <textarea>content</textarea>
  </div>
</body>

</html>

Answer 3

Answer №2

If you're looking to add some flair to your HTML elements, consider creating a style using tag names. Check out this helpful link for more information.

For example:

textarea
{
   background:yellow;
   color:red;         
}

This CSS will apply the specified styles to all textarea tags on your webpage. Feel free to view the JSFiddle I've set up using your code snippet:

https://jsfiddle.net/sumeetkumar001/sxxkjbh2/

Answer 4

If you're looking to add some flair to your HTML elements, consider creating a style using tag names. Check out this helpful link for more information.

For example:

textarea
{
   background:yellow;
   color:red;         
}

This CSS will apply the specified styles to all textarea tags on your webpage. Feel free to view the JSFiddle I've set up using your code snippet:

https://jsfiddle.net/sumeetkumar001/sxxkjbh2/

Answer 5

Answer №3

You can skip using $(window).load(function () {});, just keep this line:

$('textarea').addClass('black');

Check out the demo here!

$('textarea').addClass('black');

.black {
   background:#000;
   color:white;
}

<div>
    <textarea>content</textarea>
</div>

Answer 6

You can skip using $(window).load(function () {});, just keep this line:

$('textarea').addClass('black');

Check out the demo here!

$('textarea').addClass('black');

.black {
   background:#000;
   color:white;
}

<div>
    <textarea>content</textarea>
</div>

Tips for including a new class in an HTML element

Answer №1

Answer №2

Answer №3

Similar questions

Is it possible for a media query to target only 2 elements instead of all 3?

Ways to change columns into rows with CSS

The error detected in the W3Schools validator pertains to CSS for audio elements that do not contain

Creating a function that uses setInterval to continuously update the input with a specific value

Unable to retrieve property from NextRequest

Troubles arise when hovering over the <strong> tag and the <h4> element

Retrieve information from the script tag

Unable to utilize jQuery library in AngularJS partial HTML files, despite being loaded in the index.html file

Two interactive dropdown menus featuring custom data attributes, each influencing the options available in the other

Can date ranges be utilized as separate date items on the time scale in D3.js?

What is the best way to delete a container when its child element includes a specific string?

Arrays passed as query parameters to Next.js router.query may result in the value being

Creating a rotating circle in CSS with ion-slides: A step-by-step guide

Maximizing the potential of typescript generics in Reactjs functional components

Record the success or failure of a Protractor test case to generate customized reports

Utilizing Ajax to fetch a div element from a web page

Distinguishing between client side rendering and server side rendering is the backbone of web development

What is the best way to customize the link style for individual data links within a Highcharts network graph?

Guide to tallying the occurrences of a specific key within an object array and attaching the count to each key's current value

Connect individuals based on specific criteria within a nested array