Use an element which is selected via vanilla JavaScript with jQuery method

Question

I want to use an element which is selected via vanilla JavaScript (prepareCaption) with jQuery method like .css... is this posibble?


const prepareCaption = document.querySelector(".prepareCaption");

// I want to use the function like this and pass the above element which is selected via vanilla JavaScript
textFit(prepareCaption, 25);

function textFit(element, defaultSize) {

//so far I can only select the element via jQuery to use jQuery methods
   const text = $('.prepareCaption');

//but instead I want to use the element argument like this
   const text = element;

//this is jQuery method 
   text.css('font-size', defaultSize);
      
 }

epascarello · Accepted Answer

So you just wrap $() around element as seen in the documentation here

function textFit(element, defaultSize) {
  const text = $(element);
  text.css('font-size', defaultSize);
}

const prepareCaption = document.querySelector(".prepareCaption");
textFit(prepareCaption, 25);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Foo</p>
<p class="prepareCaption">Bar</p>

Foo

Bar

Use an element which is selected via vanilla JavaScript with jQuery method

One Answer

Add your own answers!

Ask a Question