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

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);
      
 }

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>

Advertisement

Answer