Create circle around numbers with JS and CSS

Asked

Viewed 1,191 times

3

I’m starting with css and I’m having a doubt

I have a div called numbers and within it I have numbers from 01 to 99, as I can insert a circle into their account with css without using div ?

<div id="numeros">
01
02
03
04
05
</div>

Thank you

javascript css

  • Is it a question of curiosity, or do you have some impediment to putting Ivs (or any other element) in the project? In principle, no JS is not possible. If you only use CSS, there is no selector for individual words. If serving in JS, then it would be the case of [Dit] the question and add this possibility.

  • Remembering that with JS there would no longer be "without using div", because the JS would add some element to be able to work (if not div will be span, i, but something will be added by the JS).

  • So actually I’m going to count from 01 to 9999 so if I use div it will be 9999 Divs. What’s your suggestion ?

  • Are you generating the numbers in some programming language? It costs virtually nothing to generate the Divs together. If the problem is size, generate an <i> or something like that. I think it is better to generate on the server and spend a little more bandwidth than to do by JS and run the risk of not appearing as you want on the other side, but only you can evaluate what is best in your real case. Now, if your site is already those that depends on JS for everything, one more will not hurt.

  • ok, so in js how can I count from 0 10 and insert the div’s and the circles ? I will edit the title.

1 answer

6


You can’t do this with just CSS (at least not without violent antics).

You need at least something like this:

<div class="circulos">
   <i>1</i>
   <i>2</i>
   ...
</div>

or any element which makes sense in your case, in place of i, but you need to have something "containing" the numbers.

Then, to make the circle, the CSS solves.

i {
   display:block;
   border-radius:50%;
   border:1px solid green;
}


Generating the numbers in JS

Based on the additional question in the comments, here’s a JS that already generates the numbers and spans for the CSS:

// Escolhendo o elemento que receberá a contagem:
var c = document.getElementById('circulos');

// Loop de 1 a 10
var i;
for ( i = 1; i <= 10; i++ ) {
  // Criamos um span:
  s = document.createElement('span');
  // atribuimos o número ao span:
  s.innerText = i;
  // colocamos o span dentro do elemento escolhido:
  c.appendChild( s );
}
/* aqui estilizamos os span dentro de #circulos para o efeito desejado */
#circulos span {
  display:block;
  border-radius:50%;
  width:1.3em;
  height:1.3em;
  margin:4px;
  text-align:center;
  float:left;
  border:2px solid #fc0;
}
<div id="circulos">
</div>

  • Now just a doubt, as I can do for if i equals 5 put a blue background in the circle ?

  • @Developer there is normal CSS, just like any other. What you set in #circulos span will be applied to all circles. If you want an exception, you have to add an IF pro number desired, and change the style or element of it. These things you should do everything in the question already the first time, to avoid keep answering and changing each time you change the question. It is suggested in the next ones, for as much detail as we can to help better.

  • An example to have a day of different color would be this: s = document.createElement( i==5 ? 'i' :'span' ); so in element 5 will be valid css #circulos i, just create a CSS entry with #circulos i { /* css desejado somente para o elemento 5 */ }

Browser other questions tagged javascript css

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