We Keep Coding

Replace the CSS class in HTML element with its CSS properties in JavaScript

I am trying to get the HTML page's source code using JavaScript (kind of like screenshot). And for styling, I am using external CSS. However, when I get the HTML source code, the styling won't be applied because I won't be able to get the CSS properties for the elements.
So, I am wondering if I can replace the CSS class name with actual CSS properties defined in that class. e.g.
for the HTML element,
<div class="exampleClass"><div>
And CSS,
.exampleClass {
background-color:#FFFFFF;
}
Then the extracted source code using Javascript will be
<div style="background-color:#FFFFFF;"><div>
How can I do this thing in JavaScript?
Thanks

function getCSSPropertiesBySelector(selector) {
return [...document.styleSheets].map(stylesheet => {
var g = [...stylesheet.cssRules].find(rule => rule.selectorText === selector);
if (g) {
return g.style.cssText;
}
}).find(r => r);
}
Mostly based off of https://stackoverflow.com/a/16966533/1799147
getCSSPropertiesBySelector('.logo')
//"display: block; grid-area: I / I / I / I; width: 200px; height: 44px; margin-right: 24px;"
There's probably better ways to do this but it gets the job done. It won't work if there's a duplicate class in this example, you'd probably want it to be changed to append to the properties if you had the same class in another stylesheet

You can assign the desired class to the tag HTML in javascript. For example:
const div = document.createElement('div');
div.className = 'exampleClass';
document.body.appendChild(div);
Or
div.classList.add('exampleClass');

Ag-Grid getRowClass can't find css

I'm trying to do something really simple. I'm just trying to change the background colour of my rows dynamically (the idea is to later implement this when expanding/contracting groups).
I'm currently trying to implement gridOptions.getRowClass(), but it can't seem to find my CSS. When I set a background property using getRowStyle() it works, but I need to use getRowClass() for what I plan on doing in the future with groups.
This works:
this.gridOptions.getRowStyle() = function(params) { return { background-color: 'red' } }
This does not:
this.gridOptions.getRowClass() = function(params) { return 'my-css-class' }
With CSS:
.my-css-class {
background-color: red !important;
}
The CSS is in my <style> section and the functions are in beforeMount().

If you are not applying any special logic, this should work -
this.gridOptions.rowClass = "my-css-class";
If not you can try defining gridOption configs in the grid template definition

Change auto generated CSS dynamically

Could you tell me how can I change the css dynamically? Here the problem is, the css has been generated by the framework itself. So I cannot declare or change it.
This is at runtime:
I need to pick swiper-pagination-bullets class and need to give bottom value conditionally. Like so:
Note: this is just pseudo:
If="data!=null" {
.swiper-pagination-bullets {
bottom: 190px !important;
}
}
else{
.swiper-pagination-bullets {
bottom: 150px !important;
}
}

Just like #Duannx mentioned in the comments, you could conditionally add a class in the ion-slides element, and then apply the css style rule to the pager based on that class.
<ion-slides pager="true" [class.with-data]="data" ...>
<ion-slide *ngFor="...">
<!-- ... -->
</ion-slide>
</ion-slides>
You'd need to change [class.with-data]="data" and replace it by the real property from your component, but then you could use it in the SCSS file to change the styles of the pager:
ion-slides.with-data .swiper-pagination-bullets {
bottom: 190px !important;
}
ion-slides:not(.with-data) .swiper-pagination-bullets {
bottom: 150px !important;
}

Instead of changing CSS dynamically, it would be better to override it instead by dynamically injecting a stylesheet into the page at runtime.
const style = document.createElement('style');
const bottom = condition ? 190 : 150;
style.insertRule(`.swiper-pagination-bullets { bottom: ${bottom}px; }`, 1);
document.head.appendChild(style);
I'd try to avoid using !important. If you inject a stylesheet in the manner shown above, it will already take precedence over the existing style due to it appearing later on the page, assuming the same selector specificity.
Or else you can try to artificially increase the specificity by doing .swiper-pagination-bullets.swiper-pagination-bullets (repeat as you deem fit). If that fails to work, then use !important.
Code for stylesheet injection taken from here.

How can I use a .css stylesheet in React?

So I have a very large stylesheet and I'm attempting to use it in my React code. I know typically you would use this format for styling in React:
transparentBg: {
background: 'transparent'
},
WhiteText: {
color:'white'
},
However, my css stylesheet looks like this:
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Is there anyway to convert my entire CSS stylesheet into that React-style format? Or a way for me to just use the original CSS stylesheet without converting it?

Your CSS is still just CSS and React still just renders HTML elements on the page.
This means that you can add your large CSS file into html file and just add CSS classes / ids etc. that you define there to the elements in React.
So if you have
.transparentBg{
background: transparent;
}
.WhiteText{
color:white;
}
Then in your React components you can use these classes:
var SomeComponent = function () {
return <div className="WhiteText">
Foo Bar Baz
</div>;
};

Update CSS rule property value

I have a html element which is styled (using jquery) with a background image targeted thru its class name.
When I remove the class the background image stays - which is not what I expected or want.
test.html
<div id='log' class='tile'>HELLOWORLD</div>
test.css
.tile{
background: none;
}
test.js
$('.tile').css("background-image", "url(tile.jpg)"); // We see image
$('#log').toggleClass('tile'); // We still see image
After banging my head I think I know whats happening. The css is being applied to the element - NOT to the 'class'.
How can I target a specific css rule so that its key values can be updated?
If that makes sense.

If you wan to change the css rules of the ".tile" class, then you can do it.
There is a post that explains it very well :
function changeBackgroundImage(className, value){
var ss = document.styleSheets;
for (var i=0; i<ss.length; i++) {
var ss = document.styleSheets;
var rules = ss[i].cssRules || ss[i].rules;
for (var j=0; j<rules.length; j++) {
if (rules[j].selectorText === className) {
rules[j].style.backgroundImage = value;
}
}
}
}
You can call it like this :
changeBackgroundImage(".tile","url(tile.jpg)");

The problem is that you´re setting the background-image as an inline stlye that overrides any stylesheet rules. Toggling the class won´t have any affect.
You can either have set the background through a styleheet rule and then add a class that removes it;
#log {
background-image: url(tile.jpg);
}
#log.tile {
background: none;
}
or you could just use !important as;
.tile {
background: none !important;
}
...it might be the other way around but you get the point? :)

try removing class tile and applying new class with bg: none
in effect - when needed apply class with bg, when not needed - without

No need for jQuery in this case. You can use plain old JavaScript. Check out this tutorial:
javascriptkit.com - Changing external style sheets using the DOM

You can't change the class itself without re-writing that declaration in the stylesheet, you ARE working only with the element in the selector.
Try:
$('.tile').css("background-image","none")

$('#log').toggleClass('tile',true);

I would make the background image part of the class as a css style:
.tile {background-image: url('tile.jpg')};
and then remove the class when necessary with jquery
$('#log').removeClass('tile');

you could have two classes in your css...
.tile{
background: none;
}
.tile-w-image
{
background-image: url(tile.jpg);
}
and then with jquery just toggle the classes...
$("#log").toggleClass('tile').toggleClass('tile-w-image');
I'm sure this is just one of many ways of doing this. I hope it helps.

You are very close.
It seems like you are adding inline CSS to your element and then trying to toggle the class. You should keep CSS styling separate in most cases:
HTML:
<div id='log' class='tile'>HELLOWORLD</div>
jQuery (I imagine this should be done on click or another event):
$('#log').toggleClass('tile'); // We still see image
If the "tile" class is already written to the HTML, then toggle-ing it will remove it.
CSS:
.tile{
background-image: url(tile.jpg);
}