We Keep Coding

Adjust CSS inserted from script

I was given a code snippet from a company we are working with for integration but the script they have given me is injecting their stylesheet. Is there any way to manipulate or better integrate their code into the site?
This is what they gave me:
<div id="aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD_get_appointment_container">
<script type="text/javascript" src="https://providers.doctor.com/siteEnhance/getAppointmentWidget?key=aiVwbfPVDo2FdPTRGRWzhF9I8RbaTruD"></script></div>
When I inspect the code with a web browser it shows a stylesheet and button are inserted...how can I manipulate that code?

If the CSS isn't in your side, you can't manipulate it, the most you can do is override the styles, take in account the CSS specificity

Ajaxify PushState pushing CSS files?

I'm creating a simple website and now I'm using the Ajaxify library to make page transitions look great.
The problem is: my pages have both a global CSS file (used in the whole site) and specific CSS files (one file for each page, with specific content).
When I change page with Ajaxify, it pushes the content, however doesn't push the specific CSS links in the head, so the site gets buggy. Any ideas on how to modify Ajaxify to also look for link tags and push them?
Thanks in advance.

If you are using jQuery (which I think is a requirement for Ajaxify), then you can easily manually append new style sheets to the head after the page transition has completed:
$('head').append('<link rel="stylesheet" href="page-specific-style.css" type="text/css" />');

Display div if javascript is enabled. Must have !important

I have a featured slider on my homepage that I had rigged to be completely hidden if javascript is disabled. I had a script that would then display the featured slider if javascript was enabled.
document.write('<style type="text/css">#JQuerySlider1Container{ display: block !important;}</style>');
Apparently that code is not valid according to W3C. (Though it worked so this is a total bummer).
I found an alternative piece of code that I like but I must have !important in order for the slider to be displayed.
document.getElementById('JQuerySlider1Container').style.display='block !important';
But it doesn't work with !important.
Does anybody have a simple solution for this problem?

Its not good practice to add CSS using JS. You should keep HTML, JS and CSS all completely separated.
The way to show/hide things using JS is by default hide the objects you want to hide using CSS, e.g:
#JQuerySlider1Container {display:none;}
The in your JS, add a class to the body, using something like:
$(function() {
$('body').addClass('has-js');
});
Then you can write specific CSS rules knowing that you have JS enabled, e.g:
.has-js #JQuerySlider1Container {display:block;}

Change Linkedin Company Profile plugin Width

I have been trying to figure out how to change the size of the Linkedin Company Profile width which we can create here. They will give you two script tag which will create the widget for you in your site. Nothing else. So you have no control over your css.
I had been struggling for days and finally figured it out. I tried to add inline styling on the site even with the !important tag but it still took the styles from the linkedin.css. I tried styling it every possible way but didn't work.
Since SO allows to share knowledge as Q&A format I thought of sharing this. Please see the answer below.

Here's an example of how to provide the width to a plugin:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="http://www.linkedin.com/in/xxx" data-format="inline" data-width="400"></script>
You can add a data-width="400" attribute to the script tag. That's all.

Remove all CSS rules

Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.

check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();

Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?

There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.