"Dynamic" CSS Id Names? How to Add Them to The CSS File

Dynamic CSS id names? How to add them to the CSS file?

Further to the suggestion that you should use classes for this functionality (and you should), you can, instead, use the attribute-value-begins-with selector (this may not be the formal name):

div[id^=vote_score] {
    color: #f00;
    /* and so on... */
}

JS Fiddle demo.

---

Edited to add a link to the Quirksmode.org's compatibility tables for advanced attribute selectors.

References:

• CSS3 Attribute-selectors, at Sitepoint.com.
• Attribute selectors, at CSS3.info
• Attribute Selectors, at the Mozilla Developers Network.

Handle CSS with dynamic ids

Add a class to the tags

<a href="#" class="play" id="play_1">play1</a>
<a href="#" class="play" id="play_2">play2</a>
<a href="#" class="play" id="play_1">play3</a> <!-- double ID -->
<a href="#" class="play" id="play_2">play4</a> <!-- double ID -->
<a href="#" class="file" id="file_1">file1</a>
<a href="#" class="file" id="file_2">file2</a>

Because you have double id's, either remove the ID's at all or make them unique

<a href="#" class="play" id="play_1">play1</a>
<a href="#" class="play" id="play_2">play2</a>
<a href="#" class="play" id="play_3">play3</a> 
<a href="#" class="play" id="play_4">play4</a>
<a href="#" class="file" id="file_1">file1</a>
<a href="#" class="file" id="file_2">file2</a>

In css use

.play {
  /* add your common play styles here */
}
.file {
  /* add your common file styles here */
}

How to access dynamically generated id of my HTML file in CSS and JS file associated to it

Expanding on @charlietfl comment.

First of all lets make a common class called each-card. And, give style to active-class. active-class will be added to the clicked element.

Js part taken from here

function changeActive(elem) {
  for (var i = 0; i < elem.length; i++) {
    elem[i].addEventListener("click", function(e) {
      var current = this;
      for (var i = 0; i < elem.length; i++) {
        if (current != elem[i]) {
          elem[i].classList.remove('active-card');
        } else if (current.classList.contains('active') === true) {
          current.classList.remove('active-card');
        } else {
          current.classList.add('active-card')
        }
      }
      e.preventDefault();
    });
  };
}
changeActive(document.querySelectorAll('.each-card'));

.active-card {
    background: teal;
}

<div class="row">
  <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2">
    <div class="row">
      <div class="col-12">
        <img src="img" alt="Title" class="img-fluid">
      </div>
      <div class="col-12">
        <h3>{{ blog.tittle }}1</h3>
        <p class="d-none" id="card-body">
          <h6>{{ blog.description }}</h6>
        </p>
        <a href="" type="submit" role="button" class="btn btn-info">Read more</a> 
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="each-card col-sm-3 offset-sm-1 col-12" data-id="2">
    <div class="row">
      <div class="col-12">
        <img src="img" alt="Title" class="img-fluid">
      </div>
      <div class="col-12">
        <h3>{{ blog.tittle }}</h3>
        <p class="d-none" id="card-body">
          <h6>{{ blog.description }}</h6>
        </p>
        <a href="" type="submit" role="button" class="btn btn-info">Read more</a> 
      </div>
    </div>
  </div>
</div>

Apply css style to dynamic div ID?

I may not be fully understanding the question, but couldn't you just create a style for the class .profiles in your css? If all of your divs use that class, then it should work just fine.

.profiles { (put your style here) }

Css of div with dynamic value of id?

You are concatenating the string wrongly,

$("#"+a)

And i would suggest you to the class divClass at this context since the css rules for all the div elements are same.

Simply do in your css like,

.divclasss{
  display:block;
  top:10%;
  position:fixed;
  background:#333;
  border-radius:5px;
  padding:10px;
  color:#fff;
}

Dynamic CSS content filling

Going through W3C and MDN, it is clear that you can't do that using color css property. even in CSS3.

Hence you need to do that dynamically.

Using JS

el.style.color = "#" + el.id.match(/[^_]+$/)[0];

Working fiddle

How to dynamically create CSS class in JavaScript and apply?

Here is an option:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #f00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

<div id="someElementId">test text</div>

Dynamically add rules to CSS file

var style = document.createElement('style');
style.innerHTML = '*{ color:red; } /* put your stuff here */';
document.body.appendChild(style);

create new style element and use it

just test at SO ( run from console ) and it works

document.styleSheets[0].insertRule('* { color: red; }')

How to dynamically change CSS class of an HTML tag?

You can add a CSS class based on id dynamically using classList API as follows:

document.getElementById('idOfElement').classList.add('newClassName');

Or the old way:

document.getElementById('idOfElement').className = 'newClassName';
// += to keep existing classes

---

Alternatively you can use other DOM query methods shown below to find elements. The last three return a collection so you'll have to iterate over it and apply the class to each element in the collection (similar to the example given below each).

• querySelector

• querySelectorAll

  elements.forEach(element => element.classList.add('newClassName'));
  

• getElementsByClassName

  Array.from(elements).forEach(element => element.classList.add('newName'));
  

• getElementsByTagName

  Array.from(elements).forEach(element => element.classList.add('newName'));
  

---

In your case

var element = document.getElementById('div1');
if(boolVal)
   element.className= 'blueClass'; // += ' blueClass'; to keep existing classes
else
   element.className= 'redClass';

---

Related Topics