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.
Related
How do I use the following css in javascript
#absoluteCenter {
left: 50% !important;
top: 50% !important;
-webkit-transform:translate(-50%,-50%)!important;
-moz-transform:translate(-50%,-50%)!important;
-ms-transform:translate(-50%,-50%)!important;
-o-transform:translate(-50%,-50%)!important;
transform:translate(-50%,-50%)!important;
}
I want to use it in the form of an object so I can pass a style object to a component. So it should be in this form:
var styles = {
style: property
}
Edit: I am using ReactJS, so these properties are defined before the Component is rendered to the DOM. Which is why I can't use document.getElementById()
If you have to do this through JS have a look at the below code: (Though I would recommend creating a style class and adding to html)
var myStyle="webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%)!important,transform:translate(-50%,-50%); width:600px;" ;
document.getElementById("absoluteCenter").setAttribute("style", myStyle);
I see this css code in the "style" tab of the Chrome developer tools window:
element.style {
height: auto;
width: 100%;
margin-top: -148px;
}
I want to overwrite it with this css code in my .css file:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto;
height: 244px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
But the style definitions of the element.style is already there.
I cant find the .js so fast.
Can someone help me?
Thx
What you see in the chrome developer window as element style is the styles on a element which are written inline
element.style {
/*this all are the inline written styles*/
}
Now coming to the point But with this codes the element.style is allready there you are not able to overwrite the styles because of the CSS Priorities. In this scenario the rule is Inline CSS has more priority than external CSS
So what can you do??
You have to either remove the inline css where ever its written. That way your external css will apply
If you cannot modify the inline CSS for some reason then only option is to set the styles as !important in your external CSS files. People here have already mentioned this solution, But this is not always recommended.
Take all the Inline CSS written on that element and create a new class in your external file and then put it there, Now give this class name to the element. So the original styles are applied back. Now comes the point to your new Styles that you have to override. Also the new CSS priority rule when using 2 classes. CSS rule which is read last (in the css file, not the order you put in the element) will have priority. So make sure you place the new CSS rule below the other class you just created as mentioned above.
What if you have to use 2 separate files to write these 2 classes?? Then comes one more CSS priority rule. The file that is placed last in the DOM will have the priority (remember its not when the file is loaded into the DOM, its about where its placed in the DOM)
you can add !important to end of every styles.
for example use this:
height: 244px !important;
instead of
height: 244px;
You can always go with:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto;
}
Important styles will overwrite inline styles, unless inline styles also have !important clause (but this is rare actually).
Sure, you can remove the style attribute on the element:
element.removeAttribute('style');
If the element.style is gone, your CSS file's rules will be visible.
Is there any way to remove width attribute present in css class using jquery or javascript.
table.searchlistTable {
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
}
Note: Is there any other solution instead of below.
$("table.searchlistTable").removeClass("searchlistTable");
$("table.searchlistTable").addClass("xyz");
Thank you.
Update style class any property won't feasible, but you could overwrite style any property using jquery css() function, it would also work in same manner, for instance you want to remove width then you can use auto property, see below sample code
$("table.searchlistTable").css("width", 'auto');
$(".searchlistTable").css('width' , 'auto')
or
$(".searchlistTable").css('width' , 'initial')
Safe CSS Defaults
The inherit, initial, and unset values
I am using ShadowBox for showing media. It has some property showOverlay, which i setted to false, because dont need it.
Problem is that background is not accesible as if ShadowBox is modal dialog although Visibility in CSS is setted as hidden.
In Chrome and Mozilla it will be changed to visible and is modal. It works manually if me changing it back again to hidden.
BUT WHY it is always setted to visible in Chrome and Mozilla browsers sourcepage/css????
Here are my CSS of ShadowBox:
#sb-container {
position: fixed;
margin: 0;
padding: 0;
top: 0;
left: 0;
z-index: 999;
text-align: left;
visibility: hidden;
display: block;
}
#sb-overlay {
position: relative;
height: 100%;
width: 100%;
visibility:hidden;
}
#sb-wrapper {
position: absolute;
visibility: hidden;
width: 100px;
}
and it is what Chrome and Mozilla does! in Explorer it works!
Inline styles (the ones on element.style) have a greater "priority" over CSS styles defined in a stylesheet.
What you can do:
It's a good advice to actually avoid inline styles if possible. Style your elements with the least specificity at best. That way, they're easily overridable later on.
Note that changing styles via JS (someElement.style.someStyleHere) counts as an inline style as well.
If you are changing styles dynamically, it is better to define the styles in CSS classes, and use JS to dynamically add or remove these classes on the target elements.
If you are familiar with jQuery, the addClass and removeClass are the functions I'm referencing. Of course, you can come up with your own function that parses the element's className, and add or remove the said classes.
If avoiding inline styles isn't an option (due to some framework you use that does it that way), you can override inline styles by placing !important on your styles defined in your stylesheet. It's a bit rash, and usually used as a last resort to overthrow inline styles.
Based on your screenshot it appears that visiblity: visible is set as a style inside the style attribute on the element. The style attribute always overrides what is inside any stylesheets.
try using visibility: hidden !important;
This is a very simple and interesting concept in CSS called CSS Specificity
It defines to the browser which CSS rule to be applied in case of overriding of rules.
In your case, you have applied inline CSS style to your html elements. Since it has the highest priority, whatever your write in your external .css file will be ignored.
To avoid this, remove all inline css from your html code and try to incorporate them in the external css file you having. OR as many people already suggested, you can use the "!important" to your greatest advantage.
Hope this clears out the problem.
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);
}