Developing a custom styling class using JavaScript

Question

Looking to create a custom style class within JavaScript tags.

The class would look something like this:

#file-ok {
    background-image: url(<?php echo json.get('filename'); ?>);
}

Essentially, the value returned from the PHP file (json.get('filename')) will be used as the background image name.

Is this achievable?

Answer 1

Answer №1

To display the image on the page, retrieve the filename and use it as the background for the #file-ok element once the Ajax request is complete:

$(function () {
  $.get("file.php", function(data){
    $('#file-ok').css('backgroundImage', 'url(' + data.filename + ')');
  });
});

Answer 2

To display the image on the page, retrieve the filename and use it as the background for the #file-ok element once the Ajax request is complete:

$(function () {
  $.get("file.php", function(data){
    $('#file-ok').css('backgroundImage', 'url(' + data.filename + ')');
  });
});

Answer 3

If you're looking to style multiple elements without using inline styles, consider using setProperty() on a CSSRule for a more efficient solution.

For a detailed explanation, check out this informative article - http://www.tutorialspoint.com/css/styling-multiple-elements.html

Answer 4

If you're looking to style multiple elements without using inline styles, consider using setProperty() on a CSSRule for a more efficient solution.

For a detailed explanation, check out this informative article - http://www.tutorialspoint.com/css/styling-multiple-elements.html