• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

178
Views
Import Javascript into CSS

div
{
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after
{
position: inline-block;
  content: "Something";
 }
<div>

</div>

Hi is it possible to import a JS function into CSS?

Say I have a JS function

funtion mytitle()
{
return "Something";
}

Is it possible to insert this funtion into CSS' content instead of hard coding it like i did in the snippet? I mean something like

div::after
{ content: mytitle();
}
about 3 years ago · Juan Pablo Isaza
3 answers
Answer question

0

No, we can't do it but we can accomplish the same result using Lesscss where we can use some built-in function but we can't write our own.

about 3 years ago · Juan Pablo Isaza Report

0

The answer is NO, but there is a work around to achieve this goal. By using attributes to Show ::after content in element.

In below HTML code we are using data-content attribute, where we show are content return value from our jQuery method.

<div data-content=""></div>

In CSS replace content static content: "Something"; value to dynamic attribute value content: attr(data-content);.

div::after {
  content: attr(data-content);
}

Now, just write a simple jQuery method for returning value in data-content attribute.

function mytitle() {
  $('div').attr("data-content", "Something change");
}

mytitle();

All above mentioned changes are already implemented in below code snippet. I hope it'll help you out. Thank You

function mytitle() {
  $('div').attr("data-content", "Something change");
}

mytitle();
div {
  width: 100px;
  height: 50px;
  background-color: blue;
}

div::after {
  content: attr(data-content);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-content=""></div>

about 3 years ago · Juan Pablo Isaza Report

0

No, you cannot do this. You must use preprocessors to pass variable/functions to styles.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error