Import Javascript into CSS-CodePudding

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

CodePudding user response：

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

CodePudding user response：

The answer is NO, you cannot import a JavaScript function to CSS

CodePudding user response：

You're trying to do it in opposite way - instead of importing JavaScript into CSS, you can change CSS via JavaScript.

But you want to modify a psuedo element, which JavaScript can not do. So you can write CSS to the document to override the previous CSS.

Please note that it is not recommended to write CSS to document, instead you should change your approach, like adding another element instead of a psuedo element. The following is just for reference of how you can do it via JavaScript.

function changeCSS() {
  document.documentElement.innerHTML  = '<style>div::after{content: "asdf";}</style>';
}

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

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

<div>

</div>
<button onclick="changeCSS();" type="button">Click</button>

CodePudding user response：

No. There is no syntax where the CSS calls out to the JS.

You can use a <script> element to load JS into an HTML document, then that JS can access the document's stylesheets and modify them.

Array.from(document.styleSheets).forEach(css => {
  Array.from(css.cssRules).forEach(rule => {
    if (rule.selectorText === "div::after") {
      rule.style.setProperty('content', '"foo"');
    }
  });
});

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

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

<div>

</div>

Note that it is '"foo"' not "foo" because the CSS value needs the quotes in it.

CodePudding user response：

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.

CodePudding user response：

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>

CodePudding user response：

You can use CSS Custom Properties for this. Created a snipped where I just update the text of the second element via JS. You can do this for how many elements you like.

function mytitle() {
  document.querySelector('.demo').style.setProperty('--some-text', '"My 2nd Value"');
}

mytitle();

div {
  width: 100px;
  height: 50px;
  background-color: blue;
  --some-text: 'Hello World';
  margin: 10px 0;
}

div::after {
  position: inline-block;
  content: var(--some-text);
}

<div>

</div>

<div >

</div>

CodePudding user response：

You can do it with additional Javascript and document.querySelector()

For example,

<div id="title">
</div>

function myTitle(){
    element = document.querySelector('#title')
    element.innerHTML = "Something"
}