Can you create css class at runtime? But with a caveat!

Asked

Viewed 812 times

0

I came up with a question that can be of help to many, the point is that in an html form we make a lot of use of style class (css) to make life easier, it turns out that creating classes for some situations gets boring and we often repeat the class but with another name for not remembering that we had already created something similar, for example

<style>
.w30px{ width: 30px; }
</style>

We do this because it is much easier than creating style inside the tag

<div class="w30px">TEXTO</div>

The natural sequence of creation is: we create the style file (css) then set the classes in the objects within the page as needed.

Great, it makes it a lot easier, but now comes the question:

Can you create the class at runtime according to the name of the class in the object? I would like to automate the creation process only by giving a name to the class and a function would create the style.

Example on onload page:

<script>
  function CriaEstilos(objeto){
    var w = substr($(objeto).prop("class"), 1, 2);
    $(objeto).css("width", w);
  }
</script>

I have not tested the above idea, it is merely illustrative, rsrs

But the idea is to automate the creation of simple classes with a common denominator, in this case the width of the object.

javascript html css script

  • What would be the difference between this method and the direct inline specification of an element’s style (style="width:10px")?

  • There is no difference if we create a stylesheet (.css file) or place it directly on the object. What I want to do is facilitate development and avoid typos for example. Imagine that I have several formularies along the pages, and these formularies are for different properties but with fields of common sizes, so the automated creation of styles would make life much easier, as well as creating sheet styles instead of placing directly on the object. The idea is not to worry whether a style is created or not, simply put the name of the class.

  • 1

    I understand, but if the class "w30px" has only one property ( "width:30px;") wouldn’t it be costly to create a class just for that? Its development time cost to quote class="w30px" would basically be the same as style="width:30px". It may be the lack of coffee, but I don’t see a direct benefit. Perhaps an example serves to illustrate your proposal.

  • 1

    SASS and LESS do just what you are looking for, put their syntax is not so simple!

  • My example is in the post, is that in day to day to develop Fields we adjust the sizes of the fields to arrive at a more elaborate layout, for that need to be adjusting field sizes and if I set one I have to go there and adjust another, It happens that when mecho in the style sheet changes all, including some that I do not remember, the use of a function for that would change only that form, however I would not need to keep typing much see this example of form: http://mvsoftware.com.br/exempleformulario-css.png

  • @Adriano Luz, killed the cock, I think I was not able to express myself, but that’s it, pass variables through the class, example class="width(10px)" and in css . width{ width: $value }

Show 1 more comment

1 answer

0

I came up with a simple solution, but it works until I find a more elegant solution:

$(document).ready(function () {
  
  $(".wpx").before( function() {

    var x = $(this).prop("class"); 
    var n = x.indexOf("lpx") + 3;
    var largura = x.substr(n, 3); // Considerar valor ate 999px
    
    alert("A largura do div sera: "+largura+" px");
    
    $(this).css("border", "solid");
    $(this).css("width", largura);

  });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wpx outraclasse lpx200">CLASSE DINAMICA 1</div>
<div class="wpx lpx300">CLASSE DINAMICA 2</div>
<div class="wpx lpx400">CLASSE DINAMICA 3</div>
<div class="wpx lpx500">CLASSE DINAMICA 4</div>
<p>
  Objetivo:
  <br>Ajustar largura do objeto conforme valor passado na classe lxp
</p>

The variable "lpx" becomes a reserved word and no matter where it is positioned according to div 1

Browser other questions tagged javascript html css script

You are not signed in. Login or sign up in order to post.