Skip to content
Related Articles

Related Articles

How to find all textarea and paragraphs to make a border using jQuery ?

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Mar, 2022

Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library.

Approach 1: Using the click(), css() and add() methods in jQuery. 

There are two textareas, two paragraphs, and one button defined in the following example. The button has apply-border class and has a click event listener attached to it using the click() method. On clicking the button, a border is applied on each of the textarea elements using the css() method. The first parameter being the property to set, which is a border in this case, and the second parameter is the value of this border property. 

Moreover, we chain the add() method with css() method to add all paragraphs to this jQuery object. Once again, we use the css() method to set a border for the paragraph elements, using the same procedure as discussed with the textarea elements.

Example: 

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- jQuery -->
    <script src=
    </script>
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      p {
        font-size: 1.5rem;
        font-weight: bold;
        width: fit-content;
        margin: 2rem auto 0 auto;
        padding: 0.5rem;
      }
  
      textarea {
        font-size: 1.25rem;
      }
  
      button {
        margin-top: 2rem;
        cursor: pointer;
      }
    </style>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <textarea>GeeksforGeeks</textarea>
    <textarea>GFG</textarea>
    <p>Geeks</p>
    <p>jQuery</p>
    <button class="apply-border">
      Click me to add borders
    </button>
    <script type="text/javascript">
        $(".apply-border").click(function () {
          $("textarea")
            .css("border", "3px solid green")
            .add("p")
            .css("border", "3px solid green");
        });
    </script>
  </body>
</html>


Output:

Approach 2: Using the bind(), css() and add() methods in jQuery.

This approach is quite similar to the previous approach but the key distinction is that the method used to attach the event listener to the button is the bind() method with two parameters, the first parameter being the click event and the second parameter being the anonymous function with the same logic as the previous approach, instead of using the click() method.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- jQuery -->
    <script src=
    <style>
      body {
        text-align: center;
      }
  
      h1 {
        color: green;
        font-size: 2.5rem;
      }
  
      p {
        font-size: 1.5rem;
        font-weight: bold;
        width: fit-content;
        margin: 2rem auto 0 auto;
        padding: 0.5rem;
      }
  
      textarea {
        font-size: 1.25rem;
      }
  
      button {
        margin-top: 2rem;
        cursor: pointer;
      }
    </style>
  </head>
  
  <body>
    <h1>GeeksforGeeks</h1>
    <textarea>GeeksforGeeks</textarea>
    <textarea>GFG</textarea>
    <p>Geeks</p>
    <p>jQuery</p>
    <button class="apply-border">
      Click me to add borders
    </button>
    <script type="text/javascript">
      $(".apply-border").bind("click", function () {
        $("textarea")
          .css("border", "3px solid green")
          .add("p")
          .css("border", "3px solid green");
      });
    </script>
  </body>
</html>


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!