When I add new style with jQuery will it overwrite css? - javascript

Lets say I have this jQuery code
$('head').append('<style>body, html { margin: 0!important; }.. even more ...</style>');
Will this overwrite the current css (note the !important)
I've tested it in my browser and it is working as expected and overwriting the current css.
What I basically want is to add some css without a .css file.

Since you applied a direct style tag, it will overwrite any css. !important always writes over any class, and is generally considered bad practice. why not add a class?

Related

Can I use JavaScript to swap out a hex color value?

I have a site that's maintained by a 3rd party. They will allow us to load our custom js file in the header so that we can manipulate the DOM as each page loads. I know how to swap out classes, etc. but I was curious if I can sniff for a HEX value and swap it out for another instead of adding classes here and there to do the same thing.
I don't want to this to one element (e.g. getElementByID or tag) I want it to swap out ALL instances of this variable. So if the CSS is:
fred { color: #e3e3e3; } (and other classes are also using #e3e3e3)
I want to be able to search for all instances of #e3e3e3 and change them to #d9d9d9. or something like that.
Thanks
If you are explicitly trying to modify the CSS instead of just adding either inline styles to an element or by adding your own style tag to the document with more specific CSS, you could technically do what you are asking, as answered by this other SO question.
I would recommend instead of that you either inline your CSS if you are targeting only a few DOM elements, or create a more specific CSS rule targeting the classes you want to change.

Strange CSS precedence behavior after AJAX load

I am trying to figure out how I seem to be losing my CSS precedence on an AJAX loaded page. I am loading my custom CSS last on the main page, so that should allow my CSS to override any bootstrap CSS. After loading new content via AJAX, bootstrap is overwriting my custom CSS. I can see via browser debug that bootstrap has overwritten the property.
Custom CSS Styling:
.mytableclass td {
font-size: small;
text-align: center;
vertical-align: middle;}
As bootstrap isn't setting the font-size or text-align, it applies fine, but my vertical-align is overridden. I am not loading the CSS files again in the AJAX loaded page. There has to be some sort of reason, but after several hours I can't figure it out.
As you didn't post the Bootstrap CSS class definition, I'm going to guess it is a CSS selector priority issue.
Is the Bootstrap CSS selector more specific than yours? Then it gets priority over any CSS loaded later. Either make your selector as specific or more specific, or apply the !important directive, but that is not recommended (also see ITCSS).
Loading a specific bit of CSS after everything else does not give it any precedence. What you'll want to do is make sure it has a more specific selector. (You could also use !important, but that a hack and I don't recommend it unless you can't get anything else to work.
If .mytableclass td is the selector bootstrap uses, consider adding something to the front of it. ie body .mytableclass td. Or you can go into the HTML itself and add an id that you only use as a selector in the AJAX CSS.

Style a dynamically created div element

I would like to apply a css style to a element after it's created. The element is created by a plugin, so I can't access the event in which it is created.
This element has the .appointments-address-field class. I have tried to add a simple style:
.appointments-address-field {
background: #fff;
}
... with no success. Then I tried to attach a delegated load event in jQuery:
$(document).on('load', '.appointments-address-field'), function() {
$('.appointments-address-field').css('background', '#fff');
});
... with no success either.
How can I apply a style to that element?
Edit: Sorry, I misspelled my jQuery code. Many of you have suggested to use .css instead of .style, but I did use that.
You were correct in the first place to use CSS and not code, but your css selector must be at least as specific as any existing background style applied to that element. I am of course assuming your styling is already included after the plugin's styling.
Use a tool like Chrome's F12 DOM inspector to view where the styling for an element is coming from and whether that is more specific.
e.g. it may need to be something like:
.some-parent-wrapper .some-appointment .some-group .appointments-address-field {
background: #fff;
}
If you were able to provide a link to the actual site, it would be easy to suggest the correct selector.
Update:
Do not resort to the easy fallback of !important unless the current selector also uses it: http://james.padolsey.com/usability/dont-use-important/
Your first way should work, provided:
You include it in a stylesheet after the stylesheet related to the plugin (if any).
The plugin's stylesheet doesn't use !important; if it does, you can add that to your style.
The plugin doesn't style the background of the element directly; if it does, you can use !important in your stylesheet to win.
The plugin's rule isn't more specific than yours; if it is, make your rule more specific. In any modern browser, you can right-click the element, open the dev tools, and see the rules applied to it.
Fighting style wars with !important isn't ideal. If the plugin is making this difficult in that way, you may be better off finding out what event (if any) is fired when the plugin adds the element, and then running your
$('.appointments-address-field').css('background', '#fff');
...code in response to that. (load is not fired when elements are added to the DOM, which is why that didn't work.) Also note that the function is css, not style.
Please use .css of jQuery
$(document).ready(function() {
$('.appointments-address-field').css({'background':'#fff','border':"#000"});
});
after loading plugin, this line added in your code if u have ready event already included please below code only
$('.appointments-address-field').css({'background':'#fff','border':"#000"});
try
.appointments-address-field {
background: #fff !important;
}
problems can be another style directive put different background

Adding CSS via Javascript

I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)
http://jsfiddle.net/pbPyU/
HTML:
<a class='store-locator-button'>replace me</a>
JAVASCRIPT:
$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
$(el).text('BUSCAR UNA TIENDA');
});
});
CSS:
.tempstorebutton{padding:5px; color:#fa5dae;}
It works fine in JSfiddle, but not on my site. Any suggestions?
The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.
I would recommend having your own css file being rendered after the one you want to override.
Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.
!important declarations should not be used unless they are absolutely necessary.
Every browser has default css settings. You must override css.
one approach is to reset css: reset css example
another approach is to override only the parts you need css with !important
keep in mind that in css the more specific is on a higher priority to render
you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.
you can also try to give the class a different name.
hope it helps feel free to correct and edit anyone

How do I prevent CSS interference in an injected piece of HTML?

I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css

Categories