Any Programs to Generate CSS Classes from Your HTML

Any programs to generate css classes from your html?

Did you check http://primercss.com/ ?
Seems to be doing exactly what you are asking for.

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>

How to get all css classes from html, through knockoutjs

It's not quite clear to me what you're trying to do, but the telltale signs in your code indicate that you're tryting to do the wrong thing.

This is the most minimal accordion type of functionality I can think of using Knockout and (for convenience) jQuery, taking the questions and answers straight from the sample page you provided.

You can always get more sophisticated by adding animations and whatnot. But ultimately, it's about managing a single CSS class across a list of elements.

ko.bindingHandlers.cssExclusive = {
  init: (element, valueAccessor) => {
    ko.applyBindingsToNode(element, {
      click: () => {
        var config = ko.unwrap(valueAccessor());
        $(element).closest(config.within).children().not(element).removeClass(config.class);
        $(element).toggleClass(config.class);
      }
    });
  }
};

const data = {
  sections: [
    {name: "FAQs", items: [
      {q: "What currency is the course charged in?", a: "The course is charged in Australian dollars."},
      {q: "What if the course doesn’t help me?", a: "If it doesn't help you I'll refund the purchase price in full."},
      {q: "When will the webinars take place?", a: "Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly."},
      {q: "What is the self-directed mentoring program?", a: "The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course."},
    ]}
  ]
};

ko.applyBindings(data);

.accordion {
  cursor: pointer;
}
.panel {
  display: none;
}
.accordion.active {
  color: blue;
}
.accordion.active + .panel {
  display: block;
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: sections">
  <h3 data-bind="text: name"></h3>
  <div data-bind="foreach: items">
    <p class="accordion" data-bind="cssExclusive: {class: 'active', within: 'div'}">
      <span data-bind="text: 'Q' + ($index() + 1) + '.'"></span>
      <span data-bind="text: q"></span>
    </p>
    <div class="panel">A. <span data-bind="text: a"></span></div>
  </div>
</div>

Extracting only the css used in a specific page

I've used Dust-Me Selectors before, which is a Firefox plugin. It's very easy to use and versatile as it maintains a combined list across a number of pages of which CSS values are used.

The downside is that I wasn't able to automate it to spider an entire site, so I ended up using it just on key pages/templates of my site. It is very useful nonetheless.

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

Contrary to the comment above Dust-Me Selectors 2.2 is compatible with Firefox 3.6 (I've just installed it).

Creating a css class with a Javascript object or var

Lots of ways to dynamically alter css styling after page load.
If you want to make a change that is applied as if it was a normal css script you can add a style tag to the header via javascript.
eg.

var color = "blue" ; // from your input
var element  = document.createElement("style");
element.id = "myStyleId" ; // so you can get and alter/replace/remove later
element.innerHTML = ".myClass {color:" + color + ";}" ; // css rule
var header = document.getElementsByTagName("HEAD")[0] ;
header.appendChild(element) ;

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';

Do class attributes in HTML need to have matching CSS styles?

No, it is not necessary to define all the class names used in the HTML in your CSS file. Classes that you specify in HTML but that are not defined/referenced in a CSS file make no difference in the visual output of your page. The warning is designed to show you that the class is not defined in any CSS file and as such might be confusing to other developers reading your code as the class serves no purpose.

---

Related Topics