Remove/change Internal styles sheet styles with JavaScript/jQuery - javascript

I want to be able to remove/change the internal style sheets values through JavasScript. It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. How can I change the value for the background or remove it completely? Or is there another way to accomplish this?
<body>
<head>
<style type="text/css">
#company-header{background:#000 !important;}
</style>
</head>
<div id="company-header"></div>
</body>

If your just going to change small bits of css, using jQuery's css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this:
$('#id').css('cssText', 'height: 200px !important');
This replaces all the css, so everything needs to be defined in the new css rules that are added.
If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead.
To remove all inline styles you would do something like this:
$(document).removeAttr('style');
or for div's only
$('div').removeAttr('style');
Depending on how many styles there are, this could take som time to process.
Then to add a new stylesheet do:
(function() {
var myCSS = document.createElement('link');
myCSS.rel = 'stylesheet';
myCSS.type = 'text/css';
myCSS.src = '/styles/mystylesheet.css';
var place = document.getElementsByTagName('script')[0];
place.parentNode.insertBefore(myCSS, place);
})();
Edit:
function removeCSS() {
var badCSS = document.getElementsByTagName('style')[0];
$(badCSS).remove();
});
This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference.
Internal styles will always override external styles, but for one exeption, if the external style is !important. If both the external and internal styles are !important, the internal style will be used.
Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet.
Changing the styles directly in the DOM with jQuery's css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet.

EDIT: OK, now that we understand that this question is really just about how to override the !important style declaration when setting styles via javascript, this is a duplicate of this posting: Overriding !important style.
The two possible answers there are to set a whole style string on the object or to create a new stylesheet that refers to this object.
Previous answer before question was edited:
You can just set some style directly on the object if you want like this. This will override anything that comes from a style sheet so you don't have to mess with the style sheet.
$("#company-header").css("background-color", "#FFFFFF");
or
$("#company-header").css("background", "none");
A more extensible way of modifying the look of an object or groups of objects is to based the style settings on class names and then add/remove class names using jQuery. This has the effect of switching which style sheet rules apply to a given object without having to directly manipulate the style sheets themselves:
$("#company-header").removeClass("oldClass").addClass("newClass");

$(document).ready(function(){
$('style').remove();
});
This code will remove the all internal css from the site. I used this but style tag will be visible in the page source.

Related

HTML+CSS:Is there a way to have a container(modal) in "vacuum" from the rest of the page so no other styling applied to it?

I have downloaded a free bootstrap template which has a lot of pages with a lot of styles and scripts.
When I try to add an html container to that page(which is a modal/popup), all the styles from body to headers apply to it which breaks it completely.
So because I don't want to create a class/id for all and some width/heights on the parent and body divs styling are impossible to avoid without breaking the template flow, I am wondering if there is a way to create a html container with some option that if you add it, absolutely no other styling applies to it and I can style it as I wish irrespective of what happens around it?
Could z-index work here?
L.EDIT
I have added the code here on codepen [codepen modal][1]enter link description here
The modal should look like in the codepen but instead it is spread out like it is here in this screenshot.
Your styling for your custom element must be of higher specificity than the other styling that is declared. Take a look at this great article by Emma Bostian :
https://dev.to/emmabostian/css-specificity-1kca#:~:text=CSS%20Specificity%20is%20the%20set,present%20on%20the%20element's%20style.
There's a following property in CSS:
#Element {
all: initial;
}
This should reset all the styling from the parent elements including the container in which the element is placed and the body.
Try this and declare the styles after.

Protect element from global css

My js is embedded on a third party website and it creates an <iframe> which contains a simple comments panel , but apparently on this specific website there is a CSS stylesheet which styles every <iframe> tag in the dom with the !important flag , so i can't change those css rules and the website dev team won't change this behaviour, there is another way to overcome this? can i change the tagname and still be an iframe? anything?
You can use the all property with the initial value to default the styles for that element.
From the docs:
The all CSS shorthand property sets all of an element's properties
(other than unicode-bidi and direction) to their initial or inherited
values, or to the values specified in another stylesheet origin.
A code example:
#div-to-reset-styles {
all: initial;
* {
all: unset;
}
}
Just target your specific iframe and you should be fine.
CSS Specificity is your friend here. From this overview:
Specificity determines, which CSS rule is applied by the browsers.
Specificity is usually the reason why your CSS-rules don’t apply to some elements, although you think they should.
Every selector has its place in the specificity hierarchy.
If two selectors apply to the same element, the one with higher specificity wins.
There are four distinct categories which define the specificity level of a given selector: inline styles, IDs, classes, attributes, and elements.
...
The part in bold means that you can add a class to your element(s) in question and override the more generic iframe css definition like that.

How to make an element's CSS NOT inherit from others?

I want the element to use only css that are in the "A" section and ignore the "B" section.
Is it possible?If javascript can do this, How?
Thanks you.
You can not do that with the example you've provided. The C in CSS stands for Cascading, the styling rules cascade down the DOM tree.
You have to reset the styling of the element to what you want with a more specific selector, e.g. #Examplewrapper input{}. By using a more specific selector, it'll overwrite/suplement the previous styling, without the need for !important.
Alternatively, you can set the most upper selector more specific, e.g. #content input{}. This way, when you place a form in the #footer, it will not have the styling, as #content doesn't have a #footer in it (it cant cascade).
I do recommend to define a general input as you have. This way, all forms have the same font, size and styling throughout your website. If you want another color border, you only have to change that one settings. This is the way many (profesional) sites work, because it is the most efficient.
This is how the inheritance works. You can only overwrite styles if others are set globally (i.e. for all input elements).
You can always limit the global styles of input with some classname, like input.myStyle so the raw input will have no styles set.

Change CSS properties of non-existing elements

I want to change the dimensions of a set of elements that are not created yet. They will be created by a JavaScript script that I don't have access to. JQuery's css() function would apply the changes only on existing items, while I want the code to work like if I had set CSS properties in a CSS file.
Can anyone help me do it?
One option would be to dynamically create a style element:
$("<style type='text/css'> .redbold{ color:#f00; font-weight:bold;} </style>").appendTo("head")
$("<div/>").addClass("redbold").appendTo("body");
Taken from here: Create a CSS rule / class with jQuery at runtime.
Here's a possible IE alternative (see Creating a CSS class in jQuery):
document.styleSheets[0].addRule('body', 'background: green', -1);
For reference, see the documentation for addRule.

Sproutcore Custom CSS

Hey, so I'm trying to apply some custom css to a ToolbarView in SproutCore. I've managed to get a CSSE file loading by saving it in layouts/english.lproj but the styles I write are being overridden by the ones provided by SproutCore. This only happens for styles provided by the framework. In my case this would be the background-image element. If I view the page in Chrome's developer tools (below) you can see that both styles are being applied but because my stylesheet loads afterwards it is overridden. If I uncheck the background-image element in Chrome, my background can be seen.
Here are the things that I have tried:
Giving my Toolbar an extra CSS class and targeting that (in my case AppToolbar)
Targeting every CSS class including app-toolbar (.sc-view.sc-toolbar-view.AppToolbar)
CSS !important
Lots of Googling and Reading Documentation
Has anyone else had this problem? any help/suggestions would be greatly appreciated.
Screenshot posted here
Try using the background property instead of the background-image property.
A quick solution is to give your mainPane a layerId of "myApp" and prefix all your css properties with "#myApp":
#myApp.sc-toolbar-view { ... }
A cleaner solution is to give to your app a theme: http://guides.sproutcore.com/theming_app.html.
After that, you will have to prefix your css class with $theme:
$theme.sc-toolbar-view { ... }
Don't forget that you can use scss which is integrate to Sproutcore. This way you can encapsulate all your rules like this:
$theme {
.sc-toolbar-view { ... }
.button { ... }
...
}
This allow you to write $theme only once (per file) and all your css rules will have priority over the one provided by SC.

Categories